c# - ASP.NET MVC - Using a Form in a Bootstrap Modal to call an Action from a Controller -
i have form creates entry database. trying add additional form via modal allow user populate first form searching property on webservice.
what need when user types hits search in modal call action on controller runs web service client returns list of appropriate information. want list displayed table on page. user can select search result want use populate original form. think can figure of out wasnt sure of best way kick off search modal. code follows.
view
@model ******* @{ viewbag.title = "create"; } <h2>create</h2> <!-- trigger modal button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#search">populate service</button> <!-- modal --> <div id="search" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">search property</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <p>blah blah blah</p> <div class="form-group"> <label for="api14" class="control-label col-md-2">api</label> <div class ="col-md-10"> <input type="text" class="form-control" id="api14" aria-describedby="api14" placeholder="enter api"> </div> </div> </form> </div> <div class="modal-footer"> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="search" class="btn btn-success" /> <input type="button" value="close" data-dismiss="modal" class="btn btn-danger" /> </div> </div> </div> </div> </div> </div> @using (html.beginform()) { @html.antiforgerytoken() <div class="form-horizontal"> <hr /> @html.validationsummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @html.labelfor(model => model.api14, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.api14, new { htmlattributes = new { @class = "form-control"} }) @html.validationmessagefor(model => model.api14, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.prop_no, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.prop_no, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.prop_no, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.prop_nm, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.prop_nm, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.prop_nm, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.entity, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10 "> @html.editorfor(model => model.entity, new { htmlattributes = new { @class = "form-control" } } ) @html.validationmessagefor(model => model.entity, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.prod_zone_nm, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.prod_zone_nm, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.prod_zone_nm, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.lease_name, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.lease_name, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.lease_name, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.well_no, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.well_no, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.well_no, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="create" class="btn btn-success" /> </div> </div> </div> } <div> @html.actionlink("back list", "index") </div> @section scripts { @scripts.render("~/bundles/jqueryval") }
you divide issue 2 steps.
step 1: "what need when user types hits search in modal call action on controller runs web service client returns list of appropriate information. want list displayed table on page."
add following scripts section:
@section scripts { @scripts.render("~/bundles/jqueryval") <script> $(document).ready(function () { $('#submitmodal').click(function () { var data = { api14: $('#api14').val() } $.ajax({ url: '/default/searchbyproperty', data: data }).success(function (html) { $('#api14list').html(html); $('#search').modal('toggle'); }); }); }); </script> } this simple ajax call takes value modal input , submits server. note "url" parameter passed in call need match "/{controller}/{action}". important: need update "search" button#api14 type "button", not "submit", avoid postback undesired when making ajax calls.
you can add controller:
public actionresult searchbyproperty() { var model = new list<string>(); model.add("one"); model.add("two"); model.add("three"); return partialview(model); } ... require following in partial view file named searchbyproperty.cshtml:
@model list<string> <table> @foreach (var item in model) { <tr class="api14-item"> <td>@item</td> </tr> } </table> step 2: "the user can select search result want use populate original form. think can figure of out wasnt sure of best way kick off search modal. code follows."
if confident in writing jquery, should able write js in scripts section of create page take values place in table , populate form:
$(document).on('click', '.api14-item', function () { // // todo: code here // }); hope helps!
Comments
Post a Comment