Question

我有一个网格。当用户单击其中一行中的链接时，我必须获取该行ID并在模式对话框中提示用户输入日期参数。我需要进行服务器调用以验证在对话框中输入的日期输入是否适合最初单击的行ID。如果无效，则在对话框中显示错误，否则，提交行ID和日期以执行控制器操作指定的RowId和Date作为参数。

完美的例子是使用服务器局部视图构建对话框的内容，并使用Ajax更新对话框以避免全屏刷新。

我正在使用C＃，MVC 5，jQuery，JQueryUI，并希望避免使用其他框架的其他示例。

我已经看过做各种各样事情的例子，但没有一个做过这种模式的所有事情。我真的很想得到一个可以下载的工作示例。我似乎无法把我见过的各种例子中的所有部分拼凑起来。

Answer 1

按原样复制并粘贴下面的示例。我正在使用bootstrap进行模态弹出窗口（我非常喜欢它，而不是喜欢jQuery UI对话框），如果你想改变它，那么它取决于你。其余的逻辑正是你所要求的。

<强>控制器：

namespace MVCExample.Controllers
{
    public class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    public class ExampleController : Controller
    {
        public ActionResult Index()
        {
            var p1 = new Person { ID = 1, Name = "P1" };
            var p2 = new Person { ID = 2, Name = "P2" };
            var people = new List<Person> { p1, p2 };

            return View(people);
        }

        public PartialViewResult _GetPartialView(string date)
        {
            ViewBag.Date = date;
            return PartialView("~/Views/Example/_Partial.cshtml");
        }

        public JsonResult ValidateDate(int id, string date)
        {
            //Validate your date here and return appropriate response...
            return Json(new { IsValid = true }, JsonRequestBehavior.AllowGet);
        }
    }
}

_Partial.cshtml查看：

<div style="border:1px solid red;margin-top:5px;">
    <p>Thank you.Your request for Date - @ViewBag.Date has been received!</p>
</div>

索引视图：

@model IEnumerable<MVCExample.Controllers.Person>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

@{
    Layout = null;
}

<script type="text/javascript">
    $(function () {
        var _id = null;

        $(".enterDate").click(function () {
            var id = $(this).data('id');
            _id = id;
            $("#modal").modal('show');
            $('#response').empty();
        });

        $("#btnOK").click(function () {
            $('#response').empty();
            var date = $("#myDate").val();
            if (date != "" && _id != null) {
                alert("Going to the server to check if the date is valid - " + date + ".ID - " + _id);
                $.getJSON("/Example/ValidateDate?id=" + _id + "&date=" + date, function (data) {

                    debugger;
                    if (data.IsValid == true) {
                        alert("The date appears to be valid. Going to the server again to fetch a partial view.");

                        $.get("Example/_GetPartialView?date=" + date, function (data) {
                            $('#response').html(data);
                        });
                    }
                });
            }
        });
    });
</script>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                <a href="#" class="enterDate" data-id="@item.ID">Enter date</a>
            </td>
        </tr>
    }
</table>

<!--This is the modal popup-->
<div class="modal fade" role="dialog" id="modal">
    <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">Please select date</h4>
            </div>
            <div class="modal-body">
                <input type="date" id="myDate" />
                <input type="button" id="btnOK" value="OK" />
                <div id="response"></div>
            </div>
        </div>
    </div>
</div>

<强>输出：

拼命寻找这个MVC模态对话框验证模式的工作示例

1 个答案: