MVC Html.BeginForm 和页面重新加载

Question

我以前用 C#/Winforms 开发一些应用程序，现在我正在尝试使用 MVC 学习 Web 开发。

新概念很多（JS、Ajax、ASP.net等...），请多多包涵...

看了很多，开始动手尝试了，但是还是有一点不明白

例如，我想通过表单向数据库中插入数据，只插入，没有别的。

插入的方法在控制器中

明显的方法是使用 Html 助手 @Html.BeginForm。在这一步，我无法在不重新加载整个页面的情况下执行此操作。

由于我没有找到任何明确的答案，你能帮我吗？

1-@Html.BeginForm 是否可以在发布表单后不执行任何操作以插入数据库（可能在控制器中使用特定的 return 类型的操作）或 Ajax.BeginForm 是唯一解吗？

2-更新页面的一部分，是ajax唯一的解决方案吗？

非常感谢。

Answer 1

有很多概念可以让您动脑筋。让我们从两个基本选择开始。使用简单的 post 返回或 JavaScript 和 Ajax?

更新日期

好的，让我们开始第一个，一个简单的创建过程。

您将需要数据库 table 进行更新。您可以从数据库创建一个 Entity Framework 模型。您的应用程序将与此向上更新交互 table。这是 MVC 中的 "M" 或模型。您还需要创建一个控制器（MVC 中的 "C"）和一个视图（MVC 中的 "V"）。

控制器通常包含两种方法来执行工作。当用户导航到网页时，他们获取初始数据。所有这一切都是 return 具有空模型的视图，因此任何编辑控件都处于默认状态 - 例如空文本框

[HttpGet]
public ActionResult Create()
{
    return View();
}

当用户保存视图时，将调用另一个方法（同名）。请注意，这是 POST 方法，因此 FORM 中的所有数据都打包到 ModelState 中。 MVC 会为您将模型绑定到方法的参数中——您甚至可以说要包含哪些参数。这里的版本使用Async.

您视图中的 FORM 也应该有一个防伪标记，这是第一个（隐藏）字段 return 由 MVC 系统编辑和使用 - 您通常看不到它。

假设数据有效，它被保存到数据库中（我通常有一个底层业务模型来完成保持控制器清洁的工作）。如果模型无效（例如缺少字段），现有模型将连同任何错误消息一起传递回视图，供用户进行另一次尝试。查看数据注释以了解如何定义有效值范围。

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([Bind(Include = "YourName")] MyData model)
        {
            if (ModelState.IsValid)
            {
                await _bs.MyData_UpdateAsync(model);
                    return RedirectToAction("Index");
            }

            // return with any errors
            return View(model);
        }

最后，您需要一个视图，HTML 从中动态生成并传递给客户端浏览器

@model MyApp.Models.MyData
@{
    ViewBag.Title = "Create Something";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container w-50">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.YourName, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.YourName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.YourName, "", new { @class = "text-danger" })
            </div>

            <div class="d-flex">
                <div class="ml-auto">
                    <input type="submit" value="Create" class="btn btn-primary btn-sm btn-default" />
                </div>
            </div>
        </div>
    }
</div>

Answer 2

我已经使用 ajax 在 asp.net 核心中创建了一个包含 post 数据的表格它的工作 创建局部视图

@model Department

<h2>Create</h2>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<div class="form-horizontal">
    <form asp-action="Create" role="form" asp-controller="Department" asp-antiforgery="true"
          data-ajax-success="Bindgrid"
          data-ajax="true"
          data-ajax-method="POST">
        <div class="form-group">
            <label class="control-label" asp-for="DepartmentName"></label>
            <input class="form-control" type="text" asp-for="DepartmentName" />
            <span asp-validation-for="DepartmentName" class="text-danger"></span>
        </div>
        <input class="btn btn-primary" type="submit" value="Save" />
    </form>
</div>

控制器逻辑

[ValidateAntiForgeryToken()]
        [HttpPost]
        public JsonResult Create(Department department)
        {
            if (ModelState.IsValid)
            {
                Context.Department.Add(department);
                Context.SaveChanges();
            }
            return Json(department);
        }

Answer 3

您可以使用 Razor 或 ajax 将部分视图加载到视图中。当页面的同一部分可以有不同的视图时，我会使用这种技术——例如，像一个选项卡式控件

你用 MVC 的通常风格组成了一个 URL。在此示例中，我假设对某些现有数据执行了 HTTP GET。对于您的 CREATE GET 选项，仅控制器和操作就足够了。请注意，操作中的 HTML return 替换了页面其他地方 DIV 的内容

var targetUrl = "/MyController/MyAction/" + id + "?extraParameter=" + 123;

//-----------------------------------------
// get content from URL using Ajax
//-----------------------------------------
$.ajax({
         url: targetUrl,
         type: "get",
         success: function (result) {
         $("#divPageContent").html(result);
         }
});

您可以从控制器加载 CREATE 视图，如上所示。您需要一个保存按钮，点击后，调用 Ajax 将您的值 POST 传回服务器。

您应该在您的视图中使用带有 AntiForgeryToken 的 FORM，并使用 Ajax POST。我不建议使用 HTTP GET 添加或更改数据。

有大量资源可以向您展示如何做到这一点。

假设您的 CREATE 过程有效，您可以 return 显示结果的任何视图，返回到用于创建的相同 DIV。

许多开发人员使用这种技术，甚至到了动态加载所有内容的单页网站的地步。

对于我的站点，我发现大多数进程无需诉诸 Ajax 即可正常工作。现代浏览器可以很好地处理内容变化和闪烁。我求助于 Ajax 以获取更复杂页面中的部分视图。如果您要走 Ajax 路线，请考虑一个忙碌指示器 - 当 Ajax 工作时，它会弹出您选择的图标，以便您的用户知道该页面正在做一些工作。

$(function () {
    $(document).ajaxStart(function () {
        $(".processSpinner").show();
    });

    $(document).ajaxStop(function () {
        $(".processSpinner").hide();
    });

    $(document).ajaxError(function () {
        $(".processSpinner").hide();
    });

    $(".processSpinner").hide();
});

include antiforgerytoken in ajax post ASP.NET MVC

MVC Html.BeginForm 和页面重新加载

MVC Html.BeginForm and page reload

ajax

model-view-controller

actionresult

ajax.beginform

html.beginform