0

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)

Improve this question
4
  • 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 Commented Aug 18, 2016 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. Commented Aug 18, 2016 at 16:51
  • You are mixing server-side and client-side execution in your brain. Commented Aug 18, 2016 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. Commented Aug 19, 2016 at 1:15

4 Answers 4

Reset to default
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);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, give me a while, will try it out!
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))
1

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

Improve this answer

3 Comments

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?
I was considering explicit definition of html tags as content such as $('#selector').html('<b>text</b>').
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.
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.

Improve this answer

2 Comments

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.
Create a Method in your controller that returns a PartialView. Take a look at this example. stackoverflow.com/questions/1371031/… or this cmatskas.com/update-an-mvc-partial-view-with-ajax
1

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);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.