我们可以在jQuery中使用HTML添加(块)HTML吗?部分辅助吗?c# ASP.asp.net MVC 5

本文关键字:HTML MVC net asp ASP jQuery 添加 我们 | 更新日期: 2023-09-27 18:02:55

正如标题所示,我有一个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元素可以使用这些,我也开放)

我们可以在jQuery中使用HTML添加(块)HTML吗?部分辅助吗?c# ASP.asp.net MVC 5

像下面这样试试

$(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);
}

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

简短回答:No.

请注意两者的区别JavaScript (Jquery)和MVC/ASP。净(剃须刀)。

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

因此服务器正在读取razor内容并从中创建一个有效的HTML页面。这将传递给浏览器。浏览器正在创建用户可以看到的内容,然后执行JavaScript。

所以你在你的例子中所做的是试图让JavaScript执行一个Razor函数。

你可以的。

首先,你需要把你的部分html的块放到主。cshtml文件中的js变量中。

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

,然后在javascript文件中执行追加操作。

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