MVC模式弹出窗口

时间:2017-03-07 14:58:05

标签: javascript asp.net-mvc modal-dialog bootstrap-modal modalviewcontroller

我正在尝试在我的应用程序中实现一个模态,似乎我已经尝试了几个我找到的示例 - http://www.c-sharpcorner.com/uploadfile/092589/implementing-modal-pop-up-in-mvc-application/https://codemagik.wordpress.com/2015/04/07/render-mvc-partial-view-inside-bootstrap-modal-dialog/https://www.youtube.com/watch?v=1yrTszHY-mQ只是一些而且似乎我甚至无法让这些例子起作用。目前我的第一个视图

<div>
<div class="col-md-3>">
    <h2>Reports</h2>
    <a href="javascript:void(0);" class="anchorDetail" >Daily Requested Burns</a>
</div>

@section scripts
{

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
 var TeamDetailPostBackURL = '/Home/DateSearch';
$(function () {
    $(".anchorDetail").click(function () {
        debugger;
        var $buttonClicked = $(this);
        var options = { "backdrop": "static", keyboard: true };
        $.ajax({
            type: "GET",
            url: TeamDetailPostBackURL,
            datatype: "json",
            success: function () {
                debugger;
                $('#myModal').modal(options);
                $('#myModal').modal('show');
            },
            error: function (error) {

                alert("Dynamic content load failed. - " + error );
            }
        });
    });

    $("#closbtn").click(function () {
        $('#myModal').modal('hide');
    });
});

</script>

}

我的模态视图

 <div class="container">
    <div class="row">
        <div id='myModal' class='modal'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div id='myModalContent'>
                        <div class="col-md-12">
                               <div class="modal-header">
                                                <button type="button" class="close" data-dissmiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title" id="myModalLabel">Daily Requested Burns Date Search</h4>
                               </div>

                               <hr />
                               <div class="modal-body">
                                    <div class="form-horizontal">
                                          <div class="form-group">
                                                @Html.LabelFor(model => model.BurnStartDate, new { @class = "control-label col-md-2" })
                                                <div class="col-md-10">
                                                     @Html.EditorFor(model => model.BurnStartDate, new { @id = "BurnStartDate" })
                                                     @Html.ValidationMessageFor(model => model.BurnStartDate)
                                                 </div>
                                           </div>
                                           <div class="form-group">
                                                      @Html.LabelFor(model => model.BurnEndDate, new { @class = "control-label col-md-2" })
                                                 <div class="col-md-10">
                                                       @Html.EditorFor(model => model.BurnEndDate, new { @id = "BurnEndDate" })
                                                       @Html.ValidationMessageFor(model => model.BurnEndDate)
                                                 </div>
                                           </div>
                                    </div>
                              </div>
                              <div class="modal-footer">
                                   <button id="btnSubmit" name="Command" value="Submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicons-camp-fire"></i>&nbsp;Submit</button>
                                   <button id="btnClose" class="btn btn-sm btn-primary" data-dissmiss="modal">Close</button>
                              </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的DataSearch包含HttpPost

   public ActionResult DataSearch()
    {
        //Render the partial view to be loaded in the modal dialog
        RequestedBurn requestedBurn = new RequestedBurn();
        requestedBurn.BurnStartDate = DateTime.Now;
        requestedBurn.BurnEndDate = DateTime.Now;

        return PartialView("_DateSearch", requestedBurn);
    }

    [HttpPost]
    public ActionResult DateSearch(FormCollection form)
    {
        // Process the post back data from the view
        string startDate = form["BurnStartDate"].ToString();
        string endDate = form["BurnEndDate"].ToString();
        //return View("DailyBurns");

        return RedirectToAction("DailyBurns", "RequestedBurns", new { startDate = startDate, endDate = endDate });
    }

0 个答案:

没有答案