locked
MVC pass value from modal to parent on button click RRS feed

  • Question

  • User-1162256410 posted

    How do you pass a value from a modal with rendered partial view inside to the parent textboxfor.

    textbox from my parent:

    @Html.Label("Taxpayer Name")
    @Html.TextBoxFor(m => m.taxpayername, new { @id = "search",data_toggle = "modal", data_target = "#myModal", data_backdrop = "static",data_keyboard = "false" })
    @Html.ValidationMessageFor(m => m.taxpayername)

    modal with the partial view:

    <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                @{Html.RenderAction("Payer", "Registration");}
    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>

    The Partial View:

    <table class="table" id="payer">
    <thead>
        <tr>
            <th>
                @Html.DisplayName("TITLE")
            </th>
            <th>
                @Html.DisplayName("NAME")
            </th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model) {
    <tr>
    
        <td>
            @Html.DisplayFor(modelItem => item.userTitle)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FullName) 
        </td>
        <td>
            @Html.HiddenFor(modelItem => item.userId)
        </td>
        <td>
            <a href="@Url.Action("Index","Registration",new { id=item.userId, name=item.FullName });"  onclick="SetName();">Select</a>
        </td>
    </tr>
    }</tbody>
     </table>
    
     @section Scripts{
    <script type="text/javascript" src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function(){
            $("#payer").DataTable({
    
            });
        });
    </script>
    <script type="text/javascript">
    function SetName() {
        if (window.opener != null && !window.opener.closed) {
            var txtName = window.opener.document.getElementById("search");
            txtName.value = document.getElementById('name').value;
        }
        window.close();
    }
    </script>

    whenever i click the select, i was able to retrieve the fullname and id but doesn't populate the textboxfor.

    thanks in advance.

    Thursday, October 12, 2017 8:36 AM

Answers

  • User1771544211 posted

    Hi C.Aeon,

    As I can see in your code, when you click the select, it will use link to reload the Index page. Then if you want to fill in the textboxfor with the UserName you select, you can use ViewBag. I made some changes, please take the code below as a reference.

    Controller:

    public ActionResult Index(string name)
    {
        ViewBag.name = name;
        return View();
    }

    Index View:

    @Html.TextBoxFor(m => m.taxpayername, new { @id = "search", data_toggle = "modal", data_target = "#myModal", data_backdrop = "static", data_keyboard = "false", @Value = ViewBag.name })

    Partial View:

    <a href="@Url.Action("Index","Registration",new { id=item.userId, name=item.FullName })" onclick="SetName();">Select</a>

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 13, 2017 5:33 AM

All replies

  • User1771544211 posted

    Hi C.Aeon,

    As I can see in your code, when you click the select, it will use link to reload the Index page. Then if you want to fill in the textboxfor with the UserName you select, you can use ViewBag. I made some changes, please take the code below as a reference.

    Controller:

    public ActionResult Index(string name)
    {
        ViewBag.name = name;
        return View();
    }

    Index View:

    @Html.TextBoxFor(m => m.taxpayername, new { @id = "search", data_toggle = "modal", data_target = "#myModal", data_backdrop = "static", data_keyboard = "false", @Value = ViewBag.name })

    Partial View:

    <a href="@Url.Action("Index","Registration",new { id=item.userId, name=item.FullName })" onclick="SetName();">Select</a>

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 13, 2017 5:33 AM
  • User-1162256410 posted

    it actually worked. thank you soooo much. so frustrating that the only thing was that, in the controller. thanks again.

    Saturday, October 14, 2017 2:50 AM