有“标准的mvp”吗?混合Javascript和Razor的方法

本文关键字：Javascript 混合 Razor 方法 标准 标准的 mvp | 更新日期: 2023-09-27 18:19:02

我真的不喜欢页面加载，我认为它们会降低用户体验，所以我试图让我的web应用程序高度ajax化。

当用户点击"添加新"时，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每行都是字符串值的延续。

有“标准的mvp”吗?混合Javascript和Razor的方法

答案1:-

如果你是如此热衷于Ajax化你的web应用程序，那么更好的方法是在Asp中使用Ajax助手。MVC，如

@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助手构建表单。

还有一件事，你在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
 }

将上面的视图设置为Partial View，并注明"Index"。cshtml'，然后通过Controller返回:

Public ActionResult Index()
{
  return PartialView("Index");
}
通过Jquery制作部分视图和加载部分视图可以方便地制作不引人注目的表单。

这更像是html的事情，而不是MVC/Razor，因为你本质上是在问如何将模板嵌入到你的网站中。据我所知，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>

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

相关文章：