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

Question

顾名思义，我有一部分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--;
    }
  });
});

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

$("#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.

然后，尽管剃刀引擎显示语法正确，但是新的Partial HTML无法呈现。

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

（我对template属性或jQuery.clone不太熟悉-但如果有人可以展示如何使用这些属性来完成html元素的添加，我也很乐意）

Answer 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);
}

Answer 2

您可以使用$（'＃selector'）。html（content），其中content是您的模板。 我无法想象使用jQuery创建局部视图

Answer 3

简短答案：不可以。

请注意JavaScript（Jquery）和MVC / ASP.Net（Razor）之间的区别。

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

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

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

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

Answer 4

你能行的。

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

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

然后在您的javascript文件中添加附录。

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