Toggle between dropdownlistfor and editorfor and post value from the active one in MVC

Question

0.00/5 (No votes)

See more:

, +

I am using the jQuery function

C#

toggle()

with a button to toggle between a DropDownListFor and EditorFor. The function is as follows:

JavaScript

function toggler() {
    $("#DDLF, #EF").toggle("slow");
    }

What I have tried:

The code for the button, DropDownListFor and EditorFor is:

<button type="button" class="btn btn-primary" onclick="toggler()">Toggle</button>

<div class="form-group">
                @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2", @id = "DDLF" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.prod_name, new SelectList(@Model.productos, "Value", "Text", Model.prod_name), "-Please Select-", new { @class = "form-control", @id = "DDLF", @style = "min-width: 500px" })
                    @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2", @id = "EF", @style = "display:none" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.prod_name, new { htmlAttributes = new { @class = "form-control", @id = "EF", @style = "display:none; min-width: 500px" } })
                    @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
                </div>
            </div>

However, The system doesn't post the text in EditorFor, it only recognizes the DropDownListFor part.

How can I post from the active toggled component in the view?
Is there a simpler way to do it?

Posted 15-Dec-17 0:58am

Adnan Okko

Updated 15-Dec-17 4:20am

Add a Solution

Comments

Laxmidhar tatwa technologies 15-Dec-17 7:23am

define two functions in each click event of each control

Adnan Okko 15-Dec-17 9:30am

Thank you @Laxmidhar. Can you provide a code simple for what you mean exactly?

F-ES Sitecore 15-Dec-17 7:42am

After toggling you might have to also disable the component that is now hidden and enable the component that is shown. The browser submit all inputs in the form, it doesn't know or care if those elements are visible, so you are posting the same value multiple times and it can't be expected to know which one you mean as valid. By disabling the hidden input element it won't be submitted with the form post.

Adnan Okko 15-Dec-17 9:34am

@F-ES, I used this function to disable the dropdownlistfor when I toggle for editorfor:

function toggler() {
$("#DDLF, #EF").toggle("slow", function () {
$('#DDLF').attr('disabled', 'disabled');
});
}

But it didn't work. Can you provide an example of what you suggested?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2017-12-15T04:20:00

I changed a few things around. For a start you had multiple elements with the same id which isn't allowed, ids have to be unique and if they're not jQuery will only see the first one. I put an ID on each group (you can move if you need) that is different from the control, and that id is used to show\hide the whole element. I also gave that element a data-control-id so that the element can specify which control should be enabled\disabled. In the js I hooked into the events to set the disabled attribute appropriately.

<form method="post">
    <div class="form-group" id="DDLFGroup" data-control-id="DDLF">
        @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.prod_name, new SelectList(@Model.productos, "Value", "Text", Model.prod_name), "-Please Select-", new { @class = "form-control", @id = "DDLF", @style = "min-width: 500px" })
            @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group" id="EFGroup" data-control-id="EF" style="display:none;">
        @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.prod_name, new { htmlAttributes = new { @class = "form-control", @id = "EF", @style = "min-width: 500px", disabled="disabled" } })
            @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
        </div>
    </div>
    <button type="button" class="btn btn-primary" onclick="return toggler()">Toggle</button>
    <input type="submit" value="Submit"/>
</form>

<script type="text/javascript">
    function toggler() {
        $("#DDLFGroup, #EFGroup").toggle("slow", function () {
            var el = $(this);
            var target = $("#" + el.data("control-id"));

            if (el.is(":visible")){
                target.attr("disabled", false);
            }
            else{
                target.attr("disabled", true);
            }
        });
        return false;
    }
</script>