Question Two model.PlaceHolderNumber in view

[nearChepstow]

I have two partials in one view and both are using the same model value, but both at first are set to display: none, and changed by jquery depending on the value of a dropdown.

So at any one time, one is able to be seen the other display set to none, but the first one when I submit still has an effect on the second one. So with that I mean I put a number in date, then in the controller, that is empty because there no value in the first one, so its taking that into consideration instead.

<div id="choiceNumber" style="display: none;">
                            @Html.Partial("_FormElementPartial", new ViewDataDictionary() {
                                { "Label", LH.GetText(SystemComponent.TheSystem, "lblModuleQuestionForm_NewPlaceholderNumber")},
                                { "Element", Html.NumberFieldFor(model => model.PlaceHolderNumber, 999999, BL.MaximumNumberOfDecimalPlaces, formTextField: true, minValue: -999999) },
                                { "Info", Html.LocalisedTooltip((Model.Id > 0 ? "ttEditModuleQuestionForm_NewPlaceholderNumber" : "ttNewModuleQuestionForm_NewPlaceholderNumber"), "lblModuleQuestionForm_NewPlaceholderText_ToolTip", SystemComponent.TheSystem) }
                            })
                        </div>

                        <div id="choiceDate" style="display: none;">
                            @Html.Partial("_FormElementPartial", new ViewDataDictionary() {
                                { "Label", LH.GetText(SystemComponent.TheSystem, "lblModuleQuestionForm_NewPlaceholderDate")},
                                { "Element", Html.NumberFieldFor(model => model.PlaceHolderNumber, 999999, 0, formTextField:true, minValue: -999999, htmlAttributes: new { @id = "PlaceHolderDate"}) },
                                { "Info", Html.LocalisedTooltip((Model.Id > 0 ? "ttEditModuleQuestionForm_NewPlaceholderDate" : "ttNewModuleQuestionForm_NewPlaceholderDate"), "lblModuleQuestionForm_NewPlaceholderDate_ToolTip", SystemComponent.TheSystem) }
                            })
                        </div>

 

[NoUserHere]

Moved to Asp.Net

 

[NoUserHere]

You neglected to ask a question?

 

[nearChepstow]

Sorry, so my question is, can I use two the same model values on the same page, even though one will be hidden at a time, as it seems I can only have 1 anyway, never mind if one is hidden or not.

 

[jmcilhinney]

Can the elements on the final page that are generated by the two partial views be distinguished? If both views generate elements with the same id then they will be treated as the same element in many scenarios.

 

[NoUserHere]

You can use @Html.RenderPartial() (as you are) in your view to render another partial view, with the same model without any problems. Your jquery is something I will need to look at though. Can you show me your jquery code?

If you show me your jquery, I can help you adjust your code.

After rereading your opening topic, does your dropdown menu cause a page refresh or is a refresh prevented by your reliance on your jquery code?

Once I see your jquery script along with the drop down html, I should be able to help propose a complete answer for you.

 

[nearChepstow]

Hi, ye the jquery is pretty simple, and no on load the dropdown is set and doesnt change, the value determines what one of these show. There three of them in total, I'll put it all below.

function TogglePlaceholderFieldVisibility(modalId) {
    var modal = $("#" + modalId);
    var inputValue = modal.find(".questionTypeDropdown").val();
    modal.find("#pnlPlaceholderFields").show();
    modal.find("#choice" + inputValue).show();
}

@Html.Partial("_FormElementPartial", new ViewDataDictionary() {
{ "Label", LH.GetText(SystemComponent.TheSystem, "lblModuleQuestionForm_NewQuestionType") },
{ "Element", Html.ExtendedDropDownFieldFor(model => model.QuestionType, Model.QuestionTypes, includeBlank: Model.Id <= 0,  cssClass: "questionTypeDropdown textBoxSizeFullWidth textSizeStandard text-input formElement", disabled : Model.Id > 0 )},
{ "Info", "" }
})

<div id="pnlPlaceholderFields" >
<!-- #region Placeholder Label for Text -->
<div id="choiceText" style="display: none;">
@Html.Partial("_FormElementPartial", new ViewDataDictionary() {
{ "Label", LH.GetText(SystemComponent.TheSystem, "lblModuleQuestionForm_NewPlaceholderText")},
{ "Element", Html.TextFieldFor(model => model.PlaceHolderValue, "Questionnaire_Question_Text", "Placeholder_Value_Text", TextBoxType.Standard, htmlAttributes: new { @id = (Model.Id > 0 ? "txtEditQuestionPlaceHolderValue" : "txtNewQuestionPlaceHolderValue")}, formTextField: true) },
{ "Info", Html.LocalisedTooltip((Model.Id > 0 ? "ttNewModuleQuestionForm_NewPlaceholderText" : "ttNewModuleQuestionForm_NewPlaceholderText"), "lblModuleQuestionForm_NewPlaceholderText_ToolTip", SystemComponent.TheSystem) }
})
</div>
<!-- #endregion -->

<!-- #region Placeholder Label for Number -->
<div id="choiceNumber" style="display: none;">
@Html.Partial("_FormElementPartial", new ViewDataDictionary() {
{ "Label", LH.GetText(SystemComponent.TheSystem, "lblModuleQuestionForm_NewPlaceholderNumber")},
{ "Element", Html.NumberFieldFor(model => model.PlaceHolderNumber, 999999, BL.MaximumNumberOfDecimalPlaces, formTextField: true, minValue: -999999) },
{ "Info", Html.LocalisedTooltip((Model.Id > 0 ? "ttEditModuleQuestionForm_NewPlaceholderNumber" : "ttNewModuleQuestionForm_NewPlaceholderNumber"), "lblModuleQuestionForm_NewPlaceholderText_ToolTip", SystemComponent.TheSystem) }
})
</div>
<!-- #endregion -->

<!-- #region Placeholder Label for Date -->
<div id="choiceDate" style="display: none;">
@Html.Partial("_FormElementPartial", new ViewDataDictionary() {
{ "Label", LH.GetText(SystemComponent.TheSystem, "lblModuleQuestionForm_NewPlaceholderDate")},
{ "Element", Html.NumberFieldFor(model => model.PlaceHolderNumber, 999999, 0, formTextField:true, minValue: -999999, htmlAttributes: new { @id = "PlaceHolderDate"}) },
{ "Info", Html.LocalisedTooltip((Model.Id > 0 ? "ttEditModuleQuestionForm_NewPlaceholderDate" : "ttNewModuleQuestionForm_NewPlaceholderDate"), "lblModuleQuestionForm_NewPlaceholderDate_ToolTip", SystemComponent.TheSystem) }
})
</div>
<!-- #endregion -->
</div>

 

[NoUserHere]

First, your function should be inside script tags like this :

                            <script>
                                function TogglePlaceholderFieldVisibility(modalId) {
                                    var modal = $("#" + modalId);
                                    var inputValue = modal.find(".questionTypeDropdown").val();
                                    modal.find("#pnlPlaceholderFields").show();
                                    modal.find("#choice" + inputValue).show();
                                }
                            </script>

The way that you are doing this isn't right. What you should be doing, is using your controller to send a model to your view and based off of a particular property in your model sent to your view, you show either partial view, based on that property. You are using or trying to use your view as if it where the controller. This type of design goes against the purpose of MVC in my opinion. What you could have done is sent a model from your controller to your desired view :

Pseudo code example

        public IActionResult Find(IFormCollection SearchRequest)
        {
            //Probe API
            if (!string.IsNullOrEmpty(Request["SearchRequest"]))
            {
                ViewBag.SomeBool= Request["SomeValue"];
                return View("~/Views/Find/PositiveResults.cshtml", ViewBag);
            }
            else
                return View("~/Views/Find/NoResults.cshtml", ViewBag);
        }

Then in your view all you need to do is :

                @if (ViewBag.SomeBool)
                {
                    Html.Partial("~/Views/PartialViews/PartialTestViewA.cshtml", ViewBag);
                }
                else
                {
                    Html.Partial("~/Views/PartialViews/PartialTestViewB.cshtml", ViewBag);
                }

The viewbag can be replaced with your own model. This is how you should be doing it.

Anyway regarding your current approach, all you need to do is wrap up your .js in a script tag. Your code looks alright at a glance. But just to give you something to compare it against, I've wrote out my own working example for you. Here is a screenshot of it in action :

Spoiler: Screened Gif

Screen grab of directory of view folders

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
    </select>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("select").change(function () {
                $(this).find("option:selected").each(function () {
                    var optionValue = $(this).attr("value");
                    if (optionValue) {
                        $(".color").not("." + optionValue).hide();
                        $("." + optionValue).show();
                    } else {
                        $(".color").hide();
                    }
                });
            }).change();
        });
    </script>
    <div class="green color">
        You have selected <strong>green option</strong>
        <br /><br /><br /><br />
        @Html.Partial("~/Views/PartialViews/green.cshtml", "Your Model here")
    </div>
    <div class="red color">
        You have selected <strong>red option</strong>
        <br /><br /><br /><br />
        @Html.Partial("~/Views/PartialViews/red.cshtml", "Your Model Here")
    </div>

My partial views only contain the message : Hello from green view. & Hello from red view.

Edit : Cleaned code

 

[NoUserHere]

function TogglePlaceholderFieldVisibility(modalId) { var modal = $("#" + modalId); var inputValue = modal.find(".questionTypeDropdown").val(); modal.find("#pnlPlaceholderFields").show(); modal.find("#choice" + inputValue).show(); }

One more thing, after closer look at your source. In your code, you are referring to #choice? What is choice, because I don't see any class element or id named as such. So remember to set class names and id's with names on your divs, which should reflect the tags hashed in your jquery, otherwise your jquery function won't work at all.

You need to set a div with these hashed attributes ie #pnlPlaceholderFields and #choice and add them to your div as class name or id. You also need to set a condition using an if statement in your jquery script to hide and show certain divs, just as I've done in my example. With regards using Find() in jquery, It kinda acts like a bool, but it will search all elements in the dom, and then when it finds a match in the dom, it will show your selection regardless if you have that div set as hidden by default or not. You can read a little on that here : .find() | jQuery API Documentation With that said, I'd recommend you alter your code to be something reflective of my example instead. Hopefully you found these posts and my example above helpful.