Render Partial View from JQuery

Question

I'm a desktop developer and I'm teaching myself ASP.NET MVC3 with C# (can't use MVC4 yet...). I'm slapping together some small dummy projects for this reason. In this project I use a DropDownListFor with movie categories (we all know this example right?). But because this tutorial was going too fast I'm trying to do something more simple.

My Model:

public class MovieModel {

    public int SelectedCategorieID { get; set; }

    public List<CategorieModel> Categories { get; set; }

    public MovieModel() {
        this.SelectedCategorieID = 0;
        this.Categories = new List<CategorieModel>() {new CategorieModel {ID = 1,
            Name = "Drama"},
        new CategorieModel {ID = 2,
            Name = "Scifi"}};
    }
}

public class CategorieModel {
    public int ID { get; set; }
    public string Name { get; set; }
}

See? Very simple. I have a strongly typed View in which I can use this model:

@model MvcDropDownList.Models.MovieModel (1st line of Index.cshtml).

The model is filled when the default action of the Home controller is called:

    public ActionResult Index() {

        ViewBag.Message = "Welcome to ASP.NET MVC!";

        Models.MovieModel mm = new Models.MovieModel();

        return View(mm);
    }

So far so good. No problems. Now I want to show the user the ID of the category it selected in a partial view with unobtrusive ajax... Because I didn't get it to work I started even smaller. Forget the DrowpdownList for now. All I have at the moment is this button:

<input type="button" value="Minicart test" onclick="categoryChosen();" />

And this div:

<div id="minicart">
    @Html.Partial("Information")
</div>

The mini cart stuff is from another tutorial, I apologize. Don't let it distract you please.

This javascript:

function categoryChosen() {
    var url = "Home/CategoryChosen/" + "2";
    $.post(url, function (data) {
        debugger;
        $("#miniCart").html(data);
    });
}

The 2 is indeed solid, from my earlier attempt to get it to work. Eventually I want that to be variable ofcourse...

Which calls this action:

    [AcceptVerbs("POST")]
    public ActionResult CategoryChosen(string SelectedCategorieID) {

        ViewBag.messageString = "2";

        return PartialView("Information");

    }

Yup, and you see that correctly. I just insert 2 for my test. Because like I said, can't get it to work. The partial view Information looks like this:

@{
    ViewBag.Title = "Information";
}

<h2>Information</h2>
<h2>You selected: @ViewBag.messageString</h2>

So, now for the big question. I expected the partial view to render: "You selected: 2". I even see this when I debug the javascript and look what's inside the variable 'data'. Can anyone help me why it doesn't render 2? Then I can move on with teaching myself this stuff. Thank you very much in advance for helping. If you miss any kind of information, do not hesitate to ask.

I would use the integrated MVC-Ajax functionality. Take a look at Ajax.Beginform and unobtrusive ajax. I like this tutorial asp.net/mvc/tutorials/older-versions/javascript/… — Stian Standahl
– Stian Standahl, Commented Mar 5, 2013 at 9:26

Ion Sapoval · Accepted Answer · 2013-03-05 09:33:22Z

1

I think the problem is misspelling id of the minicart div. Your id do not contain any capital letters but your selector does. So instead $("#miniCart") you should use $("#minicart") and it will work.

answered Mar 5, 2013 at 9:33

Ion Sapoval

6355 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny van der Kraan Over a year ago

I'm so embarrassed! That was the answer, thank you very much! Well if you want easy kudo's, keep following my questions. Because I'm such a beginner at webdevelopment....

K D · Accepted Answer · 2013-03-05 09:22:35Z

0

Make it like this and check if it works

function categoryChosen() {
    var url = "Home/CategoryChosen?SelectedCategorieID=" + "2";
    $.post(url, function (data) {
        debugger;
        $("#miniCart").html(data);
    });
}

This is provided considering that you haven't did any changes to your routers in global.asax

rather you should add the url like this

UrlHelper

answered Mar 5, 2013 at 9:22

K D

6,0191 gold badge25 silver badges36 bronze badges

1 Comment

Danny van der Kraan Over a year ago

Thank you for answering. Not the answer to my question though. I already tried to explain that I didn't try to pass 2 along in the url, but rather in the controller itself. Sorry for the confusion.

Collectives™ on Stack Overflow

Render Partial View from JQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related