Question

我真的不喜欢页面加载，我认为它们会减损用户体验，所以我试图让我的Web应用程序非常AJAX-ified。

当用户点击＆＃34;添加新＆＃34;时，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和剃须刀还是很陌生，所以我只是想知道，是否有更好的或者＆＃34; MVC / Razor标准＆＃34;这样做的方式，我不知道？

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

在局部视图中：

@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>

＆＃34; \＆＃34;在局部视图的每一行的末尾告诉JavaScript每行是字符串值的延续。

Answer 1

答案1： -

如果您非常热衷于使用AJAX-ify您的网络应用，那么更好的方法是在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-ified表单：

 @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'，然后通过Controller这样返回：

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>

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

希望这有点帮助。

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

2 个答案:

答案1： -

答案2： -