我们可以使用 Html.Partial Helper 在 jQuery 中附加（大块）HTML 吗？ C# ASP.Net MVC 5答案

【问题标题】：Can We Append (Chunk of) HTML in jQuery using Html.Partial Helper? C# ASP.Net MVC 5我们可以使用 Html.Partial Helper 在 jQuery 中附加（大块）HTML 吗？ C# ASP.Net MVC 5
【发布时间】：2016-08-18 16:38:45
【问题描述】：

正如标题所示，我有一大块HTML，我把它放在我的PartialView 之一中：

<div id="meaningPart">
  @Html.Partial("_Meaning", new MeaningModel() {number = 1})
</div>

我的_Meaning 部分View 看起来像这样：

<div class="chunk">
   <!--a lot of html here-->
</div>

然后，我创建了一个 jQuery 来响应 <input type="number"/> 事件（向上和向下），如下所示：

<input id="numberMeaning" type="number" class = "col-md-2 form-control form-control-plus number-input" min = "0" max = "99" value = "1"/>

$(document).ready(function () {
  var iCnt = 0;

  $("#numberMeaning").on('change', function () {
    var num = parseInt($("#numberMeaning").val());
    if (num > iCnt) { //up
      iCnt++;       
      $("#meaningPart").append("<p>ok dude, this is really a new item!</p>");
    } else { //down
      iCnt--;
    }
  });
});

现在，上面的代码可以正常工作，因为我只是将"<p>ok dude, this is really a new item!</p>" 放在jQuery append 中，但是如果我更改这部分：

$("#meaningPart").append("<p>ok dude, this is really a new item!</p>");

进入

$("#meaningPart").append("@Html.Partial("_Meaning", new MeaningModel() {number = 2})"); //by right, the number should follow iCnt here.

然后，虽然 razor 引擎显示语法正确，但新的 Partial HTML 只是不呈现。

我们如何使用jQuery 创建一个新的部分HTML？那可能吗？

（我对 template 属性或 jQuery.clone 不太熟悉 - 但如果有人可以展示如何使用它们来添加到 html 元素，我也对此持开放态度） em>

【问题讨论】：

the number should follow iCnt 在您当前的实现中根本不可能，因为@Html 在服务器端呈现并且不知道客户端发生了什么。您需要使用ajax 来获得@987654342 @ 基于iCnt
@JAG 嗨，感谢您的回复。我也不熟悉 AJAX。介意通过答案举个例子吗？我会很感激的。
您在大脑中混合了服务器端和客户端执行。
正确的方法（使用 ajax 使用控制器返回的部分视图更新 DOM，或克隆模板）取决于 {number = #} 正在做什么。如果它只是为属性number 设置表单控件的值，那么克隆就可以了，但如果它也设置其他属性，那么您将需要ajax。你需要提供更多关于你部分生成的信息。

标签： javascript c# jquery html asp.net-mvc

【解决方案1】：

像下面这样试试

$(document).ready(function () {
  var iCnt = 0;

  $("#numberMeaning").on('change', function () {
    var num = parseInt($("#numberMeaning").val());
    if (num > iCnt) { //up
      iCnt++;       
      // your GET /Controller/Action should return "partial HTML" based on iCnt
      $("#meaningPart").append($('<div>').load("/Controller/Action?iCnt=" + iCnt));
    } else { //down
      iCnt--;
    }
  });
});

你在控制器中的操作就像

public ActionResult Action(int iCnt)
{
    //get model based on 'iCnt'
    var model = GetModel(iCnt);  
    return PartialView("~/views/Folder/partialview.cshtml", model);
}

【讨论】：

谢谢，给我一点时间，试试看！
这没关系...除了两件事：（1）它正在替换，而不是添加元素，有什么建议吗？（2）我已经拥有的一些状态被新加载删除（但现在忘记它 - 如果您对问题（1）有建议，我会很高兴）

【解决方案2】：

您可以使用 $('#selector').html(content) ，其中 content 是您的模板。我无法想象使用 jquery 创建局部视图

【讨论】：

感谢您的回复。（投票赞成）但是在我的特殊情况下如何使用模板（不是一般意义上的 $('#selector').html(content)`？你介意详细说明吗？
我正在考虑将 html 标签明确定义为内容，例如 $('#selector').html('text')。
问题是我的 html 非常大......所以我想知道是否有更有效的方法来做到这一点，而不是重写整个 html。

【解决方案3】：

简短回答：不。

请注意两者的区别 JavaScript (Jquery) 和 MVC/ASP.Net (Razor)。

JavaScript 在浏览器中的客户端站点上执行。 MVC 在服务器上执行。

所以服务器正在读取剃须刀内容并从中创建有效的 HTML 页面。这被传递到浏览器。浏览器正在创建用户可以看到的内容，然后执行 JavaScript。

因此，您在示例中所做的是尝试让 JavaScript 执行 Razor 函数。

这样做的唯一方法是使用 AJAX。

【讨论】：

您好，感谢您阐明 Razor 无法工作的原因。这就解释了为什么。有没有办法在客户端创建 html 端（比如，按照你的建议使用 AJAX？）我也不熟悉 AJAX。
在您的控制器中创建一个返回 PartialView 的方法。看看这个例子。 stackoverflow.com/questions/1371031/… 或这个cmatskas.com/update-an-mvc-partial-view-with-ajax

【解决方案4】：

你可以做到的。

首先，您需要将部分 html 的块放入主 .cshtml 文件中的 js var。

<script>
    var chunkHtml = "@Html.Partial("_Meaning", new MeaningModel() {number = 2})"
</script>

然后在您的 javascript 文件中追加内容。

$("#meaningPart").append(chunkHtml);

【讨论】：