ASP MVC - 在不加载页面的情况下在部分视图中提交更新或创建操作

Question

这是我的索引视图，其中部分视图被加载到

下面的div中

 @model IEnumerable<FullStackTest.Models.CLIENT>    
@{
        ViewBag.Title = "Index";
    }

<style>
    #title {
        font-family: Georgia, 'Times New Roman', Times, serif;
    }
</style>

<div class="text-center jumbotron">
    <h2 id="title" class="text-center">Clients</h2>
    Current time: @DateTime.Now.ToLongTimeString()
    <br />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript" language="javascript">
        function ClearResults() {
            $("#divClients").empty();
        }
    </script>
</div>

@Ajax.ActionLink("Full List", "All", new AjaxOptions
{
    HttpMethod = "GET",
    UpdateTargetId = "divClients",
    InsertionMode = InsertionMode.Replace,
    OnBegin = "ClearResults"
})

<span style="color:black">||</span>

@Ajax.ActionLink("Create", "Create", new AjaxOptions
{
    HttpMethod = "GET",
    UpdateTargetId = "divClients",
    InsertionMode = InsertionMode.Replace,
    OnBegin = "ClearResults"
})

<div id="divClients" class="well">
    @* Placeholder for the content *@
</div>

AJAX Action链接将页面加载到索引中，但是当我点击创建页面上的提交按钮（部分视图）时，整个页面会重新加载。

“创建”页面只是另一个CSHMTL页面：

@model FullStackTest.Models.CLIENT

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>CLIENT</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.First, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.First, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.First, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Last, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Last, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Last, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", 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-default"/>
            </div>
        </div>
    </div>
}

这是我的控制器：

public class ClientsController : Controller
    {
        private ContextClass db = new ContextClass();

        public ActionResult Index()
        {
            return View();
        }

        public PartialViewResult All()
        {
            List<CLIENT> model = db.CLIENTs.ToList();
            return PartialView("_Client", model);
        }

        public PartialViewResult Details(int? id)
        {
            CLIENT client = db.CLIENTs.Find(id);
            return PartialView("_Details", client);
        }

        public PartialViewResult Create()
        {
            return PartialView("_Create");
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Id,First,Last,Email")] CLIENT client)
        {
            db.CLIENTs.Add(client);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
// More code

我知道你必须使用AJAX，但我不确定在哪里添加它，以便数据库创建一个新条目而不刷新索引视图。