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.

Answer 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.

Answer 2

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