Can We Append (Chunk of) HTML in jQuery using Html.Partial Helper? 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)

`the number should follow iCnt` is not at all possible with your current implementation since @Html renders at server side and has no clue whats going on at client side.you need to use `ajax` to get that `partial html` based on `iCnt` — Ja9ad335h, Aug 18 '16 at 16:50
@JAG hi, thanks for your response. I am not familiar with AJAX either. Mind to give example through an answer? I will appreciate it. — Ian, Aug 18 '16 at 16:51
You are mixing server-side and client-side execution in your brain. — matt-dot-net, Aug 18 '16 at 19:35
The correct approach (either using ajax to update the DOM with a partial view returned by a controller, or cloning a template) depends on what `{number = #}` is doing. If its just setting the value of a form control for property `number` then cloning would be fine, but if its setting other properties as well, then you will need ajax. You need to give a bit more information about what you partial is generating. — , Aug 19 '16 at 01:15

Ja9ad335h · Accepted Answer · 2016-08-18T18:08:55.643

3

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

edited Aug 18 '16 at 18:08

answered Aug 18 '16 at 16:57

Ja9ad335h

4,995
2
21
29

Thanks, give me a while, will try it out! – Ian Aug 18 '16 at 16:58
This is OK... except for two things: (1) it is replacing, rather than adding the element, any suggestion? (2) some states which I have already had is removed by the new loading (but forget it for now - I would be happy enough if you have suggestion for problem (1)) – Ian Aug 18 '16 at 17:07

score 1 · Answer 2 · answered Aug 18 '16 at 16:46

1

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

answered Aug 18 '16 at 16:46

SzymonK

98
4

I appreciate your response. (Voted up) But how do I use the template in my particular case (not in general sense like $('#selector').html(content)`? Do you mind to elaborate? – Ian Aug 18 '16 at 16:48
I was considering explicit definition of html tags as content such as $('#selector').html('text'). – SzymonK Aug 18 '16 at 16:52
The problem is my html is pretty large in size... so I am wondering if there is a more efficient way to do it rather than re-writing the whole html. – Ian Aug 18 '16 at 16:56

score 1 · Answer 3 · answered Aug 18 '16 at 16:52

1

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.

answered Aug 18 '16 at 16:52

Fabian

56
1

Hi, thanks for clarifying the reason why the Razor wouldn't work. That explains why. Is there any way to create the html side to the client side (say, using AJAX as you suggested?) I am not familiar with AJAX either. – Ian Aug 18 '16 at 16:54
Create a Method in your controller that returns a PartialView. Take a look at this example. http://stackoverflow.com/questions/1371031/asp-net-mvc-partial-view-controller-action or this https://cmatskas.com/update-an-mvc-partial-view-with-ajax/ – Fabian Aug 18 '16 at 16:59

score 1 · Answer 4 · answered Aug 18 '16 at 17:13

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

Can We Append (Chunk of) HTML in jQuery using Html.Partial Helper? C# ASP.Net MVC 5

4 Answers4

Linked