How do I transfer the selected code value from Modal Form to Text Box Parent MVC page

Question

User-434639980 posted

Hello

I have some text boxes in the parent view, and one of these text boxes needs to get its value from the modal form

1.  When I click on the select button, the modal form opens
2. The user finds his / her own record from the modal form and clicks on the modal form selector button
3. The value of the selected record code should be transferred to the Parent page and the corresponding text box..
4. During the process, the rest of the textboxes on the Parent page should not be cleared (not postback)

Please see this picture

I've done items 1 and 2, but I need help and guidance to implement item 3

Thanks for the help

Modal Page:

@ModelType IEnumerable(Of Machinary.Jobs)
@Code
    Dim wg As New WebGrid(Model, rowsPerPage:=10, canPage:=True, canSort:=True, ajaxUpdateContainerId:="wg1")
    Dim rowIndex = ((wg.PageIndex + 1) * wg.RowsPerPage) - (wg.RowsPerPage - 1)
End Code


<div class="panel panel-body">
  
                  


<div id="GridList">
@Using (Ajax.BeginForm("JobList", "Personel", FormMethod.Post, New AjaxOptions With {
            .InsertionMode = InsertionMode.Replace,
            .UpdateTargetId = "GridList"}))
@<div Class="input-group m-bot15">
@Html.TextBox("strSearch", Nothing, New With {.class = "form-control"})
<span class="input-group-btn">
<input Class="btn btn-white" type="submit" value="Search">
</span>
</div>
End Using



@wg.GetHtml(tableStyle:="table table-bordered table-hovor", mode:=WebGridPagerModes.All,
                        htmlAttributes:=New With {.id = "wg1", .class = "Grid"},
                        firstText:="<<",
                        lastText:=">>",
                        footerStyle:="table-pager",
                        columns:=wg.Columns(
                        wg.Column("Code", Sorter("Title", "Code", wg)),
                        wg.Column("Title", Sorter("Title", "Title", wg)),
                        wg.Column(header:="", format:=Function(item) New HtmlString(
                        Html.ActionLink("Select", "JobSelect", New With {.id = item.Id}, htmlAttributes:=New With {.class = "btn btn-info"}).ToString()))))

@functions
    Public Shared Function Sorter(columnName As String, columnHeader As String, grid As WebGrid) As String
        Return String.Format("{0} {1}", columnHeader, If(grid.SortColumn = columnName, If(grid.SortDirection = SortDirection.Ascending, "▲", "▼"), String.Empty))
    End Function
End Functions

</div>
</div>

Parent Page:

@ModelType Machinary.Personel
@Code
    ViewData("Title") = "personel"
End Code

@Using (Html.BeginForm("BimJob", "Personel", FormMethod.Post))
    @Html.AntiForgeryToken()
    @Html.HiddenFor(Function(p) p.Id)

    @<div Class="panel">
        <header Class="panel-heading tab-bg-dark-navy-blue">
            <label class="bg-transparent wht-color">Personel</label>
        </header>
        <br />

        <div class="form-horizontal panel-body">

            @Html.ValidationSummary(True, "", New With {.class = "text-danger"})
            <div class="row">

                <div class="form-group col-md-6" id="jobinfo">
                    <div class="col-md-10">
                        <label> Code</label>
                        <div class="input-group m-bot15">
                            <input type="text"  name="jobcode" class="form-control" />
                            <span class="input-group-btn">
                                <input class="btn btn-white" id="btnjob" type="button" value="Select" data-toggle="modal" data-target="#exampleModalLong" />
                            </span>

                        </div>
                        @Html.ValidationMessageFor(Function(model) model.BimJobId, "", New With {.class = "text-danger"})

                    </div>
                </div>
                <div class="form-group col-md-6">
                    <div class="col-md-10">
                        <label> Title</label>
                        <input type="text" value="@ViewBag.jobTitle" name="jobtitle" class="form-control" readonly="readonly" />
                    </div>
                </div>


                <hr />

            </div>
            <hr />   

            <input type="submit" value="Edit" class="btn btn-success" />

        </div>
    </div>
End Using

<div class="pull-left btn btn-default">
    @Html.ActionLink("Back", "Index")
</div>



<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="partial"></div>
            </div>

        </div>
    </div>
</div>


@section MyScripts

    <script type="text/javascript">
        $(function () {
            $('#btnjob').click(function () {
                var route = '@Url.Action("JobList", "Personel")';
                $('#partial').load(route);
            });

        });

    </script>

End Section

Controller:

  Function JobList() As ActionResult
            Return PartialView("_PVListJobs", db.Jobs.Where(Function(c) c.Code.Length = 6).Take(10).OrderBy(Function(o) o.Code))
        End Function

        <HttpPost>
        Function JobList(strSearch As String) As ActionResult
            If strSearch.ToString.Trim.Length >= 4 Then
                Dim q1 = db.Jobs.Where(Function(c) c.Code.Contains(strSearch.ToUpper.Trim) Or c.Title.Contains(strSearch.ToString)).OrderBy(Function(o) o.Title)
                Return PartialView("_PVListJobs", q1.Where(Function(c) c.Code.Length = 6).ToList)
            End If
            Return PartialView("_PVListJobs", db.Jobs.Where(Function(c) c.Code.Length = 6).Take(10).OrderBy(Function(o) o.Code))
        End Function

Answer 1

User1520731567 posted

Hi Ashkan209,

  Html.ActionLink("Select", "JobSelect", New With {.id = item.Id}, htmlAttributes:=New With {.class = "btn btn-info"}).ToString()))))

According to your descriptions,if you want to implement activities between the main page and the popup,you cam not code url in select button,it will cause a new redirection.

You could add empty actionname or controllername and give button specific class name and value which store item.ID.

Html.ActionLink("Select",null, New With {.id = item.Id}, htmlAttributes:=New With {.class = "select btn btn-info",.value = item.ID}).ToString()))))

And in parent View,I suggest you could use delegate() function to monitor the click event of select button:

    $("body").delegate('.select', 'click', function () { //it will jump to this function,after your click select button in modal form
        
        var id = this.getAttribute("value");//get item.Id from this
        $("xxx").html(....);//then, do sth by html() or Append() to render data
or
        $("xxx").Append(....);
            });

Like the picture,it can jump to parent view successfully:

Best Regards.

Yuki Tao

Answer 2

User-434639980 posted

thanks

It looks like the id value of the model is transferred to parent successfully, But the modal form is not closed and the modal form contents are opened in a new page and there is no access to the parent form.

this is my code:

  $("body").delegate('.select', 'click', function () { //it will jump to this function,after your click select button in modal form

            var id = this.getAttribute("value");//get item.Id from this
            //$("natcode").html(id);//then, do sth by html() or Append() to render data
            $('.exampleModalLong').modal('hide');
        });

Answer 3

User1520731567 posted

Hi Ashkan209,

Yes, I missed it.

You could use JQ selector to hide modal popup.

if $('.exampleModalLong').modal('hide'); not work,you could also use the below method:

for example:

xxx.hide()

xxx.attr("style") == "display: none;"

Best Regards.

Yuki Tao