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

Question

As the title suggests, I have a chunk of HTML which I put in one of my PartialView :

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

where my _Meaning partial View looks like this:

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

Then, I create a jQuery which respond to a <input type="number"/> event (up and down) like the following:

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

now, the above code works fine because I simply put "<p>ok dude, this is really a new item!</p>" in the jQuery append , but if I change this part:

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

Into

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

Then, although the razor engine shows that the syntax is correct, the new Partial HTML just doesn't render.

How do we create a new partial HTML using jQuery ? Is that possible?

(I am not too familiar with template attribute or jQuery.clone - but if it anyone can show how the adding to the html element can be done using those, I am open to that too)

Answer 1

try it like below

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

your Action in Controller like

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

Answer 2

You can use $('#selector').html(content) where content is your template. I cannot imagine to create a partial view using jquery

Answer 3

Short answer: No.

Please be aware of the difference between JavaScript (Jquery) and MVC/ASP.Net (Razor).

JavaScript is executed on the client site in the browser. MVC is executed on the server.

So the server is reading the razor stuff and creating a valid HTML page from it. This is delivered to the browser. The browser is creating something the user can see and then is executing the JavaScript.

So what you are doing in your example is trying to get JavaScript to execute a Razor function.

The only way to do something like that would be to use AJAX.

Answer 4

You can do it.

First you need to put the chunk of your partial html to a js var inside your main .cshtml file.

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

and then do your append in your javascript file.

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