是否有混合 Javascript 和 Razor 的“标准 MVC”方式？

Question

我真的不喜欢页面加载，我认为它们有损用户体验，所以我试图让我的 Web 应用程序高度 AJAX 化。

当用户点击“Add new”时，Javascript 会根据使用 Razor 的模型生成一个表单，代码如下：

<script type="text/javascript">

    var strNewCategoryForm = '<div><i class="glyphicon glyphicon-folder-open rightfolderpadding"></i>@using (Html.BeginForm("AddCategory", "Password", FormMethod.Post, new { @class="newcategoryform", role = "form", id="[1]" })) { @Html.AntiForgeryToken() @Html.PasswordFor(m => m.Category_ParentID, new { type = "hidden", value = "0" }) @Html.PasswordFor(m => m.CategoryName, new { type = "text" })  <span class="btn-group groupalign"><a href="#" onclick="saveNewCategory(\'#[2]\');return false;" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-save"></i>Save</a></span> }</div>';

</script>

代码运行良好，Razor 能够在字符串中生成表单，所以我对这项工作没有任何问题。 但是，对于代码的可读性和易于开发而言，它并不是那么好。

我对 MVC 和 razor 还是很陌生，所以我只是想知道，有没有更好的或“MVC/Razor 标准”的方式来做这件事，我不知道？

编辑： 如果有人感兴趣，我已经使用了 Exception 的两个答案：

在局部视图中：

@model Secure_Password_Repository.Models.Category

<div><i class="glyphicon glyphicon-folder-open rightfolderpadding"></i> \
    @using (Ajax.BeginForm("AddCategory", "Password", new AjaxOptions { HttpMethod="post", OnFailure="" }, new { @class="newcategoryform", role = "form", id="[1]" })) 
    { 
    @: \
    @Html.AntiForgeryToken() @: \
    @Html.HiddenFor(m => m.Category_ParentID, new { value = "0" }) @: \
    @Html.TextBoxFor(m => m.CategoryName) @: \
    @: <span class="btn-group groupalign"><a href="#" onclick="saveNewCategory(\'#[2]\');return false;" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-save"></i>Save</a></span>  \
    }</div>

在主视图中：

<script type="text/javascript">

    var strNewCategoryForm = '@Html.Partial("_NewCategoryForm")';

</script>

局部视图中每行末尾的“\”告诉 JavaScript 每行是一个字符串值的延续。

Answer 1

答案 1：-

如果您非常热衷于 AJAX 化您的 Web 应用程序，那么更好的方法是在 Asp.MVC 中使用 Ajax 助手，例如

@Ajax.BeginForm() 或 @Ajax.ActionLink() 以及像 @Html.Partial() 这样的助手，

@Html.RenderPartial() 等也很方便异步加载数据。

他们的基本用法（我在这里举个假设的例子）：-

@Ajax.ActionLink("Show", 
                 "Show", 
                  null, 
                  new AjaxOptions { HttpMethod = "GET", 
                  InsertionMode = InsertionMode.Replace, 
                  UpdateTargetId = "dialog_window_id", 
                  OnComplete = "your_js_function();" })

@using (Ajax.BeginForm("Edit", "Cars", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace, 
    HttpMethod = "POST",
    OnSuccess = "updateSuccess"
}, new { @id = "updateCarForm" })) { ..... } 

点击此链接：- http://www.codeguru.com/csharp/.net/working-with-ajax-helper-in-asp.net-mvc.htm

以上链接将有助于您了解使用 Ajax Helpers 构建表单。

还有一件事，“在我看来”，您在 javascript 中使用 razor 语法构建表单的方式根本不是一个好的选择。

---

答案 2：-

一个小演示如何构建一个不需要任何页面重新加载的完全 ajax 化的表单：

 @using (Ajax.BeginForm("Index", "Home", null, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Mydiv" }, new { @id = "frm" , @style ="width:700px" }))
 { 
  //Your HTML here
 }

使上面的视图成为一个局部视图，说'Index.cshtml'，然后通过控制器以这种方式返回它：

Public ActionResult Index()
{
  return PartialView("Index");
}

通过 Jquery 制作局部视图和加载局部视图对于制作不显眼的表单很方便。

Answer 2

这比 MVC/Razor 更像是 HTML 的东西，因为您本质上是在询问如何将模板嵌入到您的网站中。 AFAIK html 尚不支持开箱即用的模板，因此您需要一些 JavaScript（在您现在的情况下，您可能正在使用 jquery）

大部分模板引擎，如 knockoutjs、handlebars 等（甚至可能是 jquery）都支持嵌入类似这样的模板：

<script type="text/html" id="my_template">
    <div>
        <p>
            My template
        </p>
    </div>
</script>

浏览器不会呈现该 html，但 JavaScript 库会使用它（可选地进行一些运行时数据绑定）并显示它。

注意：您显然可以将该模板中的 html 放入部分视图中：

_MyTemplate.cshtml：

    <div>
        <p>
            My template
        </p>
    </div>

查看：

<script type="text/html" id="my_template">
    @Html.Partial("MyTemplate")
</script>

大多数模板引擎还支持异步加载模板，在这种情况下，您只需将它们单独渲染为部分视图。

希望这会有所帮助。