Susan Susan - 6 months ago 31
Ajax Question

How to pass the Value of particular field of parent View to Child View in MVC4?

Hi I have to pass the Id (which is select from a particular field) from Parent View to Child View. I will explain my issue clearly.

Parent View

Parent View

In my parent view I have two fields. CustomerName and ContactPerson. Both are dropdowns.Both are cascading dropdown. If i select a CustomerName the CustomerName related ContactPerson will automatically load in ContactPerson dropdown.

Suppose if the ContactPerson name is not in the list means i will click that + button which is near to ContactPerson. It will open one pop window.The pop-window is below

Pop-up Window (Child View)

enter image description here

Now all are working fine. Now i have one new issue. That is if i select the CustomerName and then select the ContactPerson but the contactperson name is not in the list. so i click the + button it will open the pop-up window at the same time it have to pass the ID from parent view( CustomerID which i select in the parent view CustomerName dropdown) to the CustomerName Field (Which is in pop-up window child view ). How i do this . Any one help me to resolve this issue. I tried to explain my issue as per my leve best Any one understand my issue give some solution or Suggestion to this problem.

My View Code

Parent view dropdownlist

@Html.Label("Customer Name", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })


Modal form view

<div class="col-sm-3">
<span style="color: #f00">*</span>
@Html.Label("Contact Person", new { @class = "control-label" })<a href="#" class="btn btn-primary" id="modal-opener" style="float: right; Width: 28px; height: 28px; ">+</a>
<div id="dialog-modal" title="Add New Contact Person" style="display:none">
<div class="box-body">
@Html.Label("Customer Name")
@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text", id = "CustomerName" })

@Html.LabelFor(model => model.ContactPerson)
@Html.TextBoxFor(model => model.ContactPerson, new { @class = "form-control", type = "text" })
@Html.ValidationMessageFor(model => model.ContactPerson)

....

<div class="box-footer">
<input id="Button1" class="btn btn-primary" type="button" value="Save" onclick="SaveContact()" />
</div>
</div>
</div>
</div>


My J-query Code

$(function () {
$("#modal-opener").click(function () {
debugger
$("#dialog-modal").dialog("open");
});
....
})


Advance Thanks.

Answer

Your currently generating html with duplicate id attributes for the CustomerID from both modals which is invalid html, so first you need to either change one or other of the property names in your models or override the default id attribute in one or other of the form controls in the view.

The next issue is that you should not be generating a dropdownlist for the CustomerID in the pop-up form (since its already been selected in the main view), but instead add a hidden input for the selected CustomerID (so it can be posted to the controller) and <div> element for the selected customer name (which you can then style to look like a textbox).

Change the child (pop-up) view code to

<div class="box-body">
    <div>Customer Name</div> // you don't have a control so a label is not appropriate
    <div id="customername"></div> // style this to look like a textbox
    @Html.HiddenFor(m => m.CustomerID, new { id = "customer" }) // add hidden input

    @Html.LabelFor(model => model.ContactPerson)
    @Html.TextBoxFor(model => model.ContactPerson, new { @class = "form-control", type = "text" })
    @Html.ValidationMessageFor(model => model.ContactPerson)

    .... // other controls

Note the id attribute given to the hidden input so its not a duplicate

Then modify your script for opening the model to

$("#modal-opener").click(function () {
    // set the value of the hidden input
    $('#customer').val($('#CustomerID').val());
    // set the value of the customer name
    $('#customername').text($('#CustomerID option:selected').text());
    // display the dialog
    $("#dialog-modal").dialog("open");
});

Side note: you should check you html for other potential duplicate id attributes (e.g. both the parent and child views appear to have form controls for an Email property) and change them as required

Comments