Simple ASP.NET PartialView issue

Question

I'm very new to ASP.Net and am trying to figure out partial views. I'm trying to get some very simple data to load in a partial view and am just not having any luck. I've got the following, and everything in it works except the load button:

Index.cshtml

@model IEnumerable<MMC_ASP.Models.MMCProjectViewModel>

@{
    ViewBag.Title = "MMCView";
}

<h2>Active Projects</h2>

<div class="project-list">
    @foreach (var item in Model)
    {
        <div class="mig-project @item.ColorClass">
            <div>
                <div class="client-name">@item.Client</div>
                <div class="source-target">@item.SourceTarget</div>
                <div class="server-name">@item.ServerName</div>
                <div class="error-count">@item.ErrorCount</div>
            </div>
        </div>
    }
</div>

<div id="partial"></div>

<input type="button" id="btn" value="Click for Data" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            $('#partial').load('/MMC/LoadPartialView');
        });
    });
</script>

MMCController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MMC_ASP.Controllers
{
    public class MMCController : Controller
    {

        public ActionResult Index()
        {
            Models.MMCProjectViewModel Project1 = new Models.MMCProjectViewModel() { Client = "Test Client1", SourceTarget = "Source to Target", ServerName = "Server1", ErrorCount = 3, ColorClass = "yellow" };
            Models.MMCProjectViewModel Project2 = new Models.MMCProjectViewModel() { Client = "Test Client2", SourceTarget = "Source to Target", ServerName = "Server2", ErrorCount = 1, ColorClass = "red" };
            Models.MMCProjectViewModel Project3 = new Models.MMCProjectViewModel() { Client = "Test Client3", SourceTarget = "Source to Target", ServerName = "Server3", ErrorCount = 0, ColorClass = "green" };
            Models.MMCProjectViewModel Project4 = new Models.MMCProjectViewModel() { Client = "Test Client4", SourceTarget = "Source to Target", ServerName = "Server4", ErrorCount = 2, ColorClass = "green" };
            Models.MMCProjectViewModel Project5 = new Models.MMCProjectViewModel() { Client = "Test Client5", SourceTarget = "Source to Target", ServerName = "Server5", ErrorCount = 1, ColorClass = "red" };

            List<Models.MMCProjectViewModel> ProjectList = new List<Models.MMCProjectViewModel>();
            ProjectList.Add(Project1);
            ProjectList.Add(Project2);
            ProjectList.Add(Project3);
            ProjectList.Add(Project4);
            ProjectList.Add(Project5);

            return View(ProjectList.OrderBy(o => o.Client).ToList());
        }

        public ActionResult LoadPartialView()
        {
            return PartialView();
        }
    }
}

LoadPartialView.cshtml

<div>TEST DATA HERE</div>

Nothing happens when I click the "Click for Data" button. What am I missing? And for the record, I do realize I should be breaking the script into a separate file, and that the work on the Index action will be done differently. This is a proof of concept for me to make sure I understand all the pieces, and I believe this is the last one to make this work.

Answer 1

Your code looks fine. I have a very strong feeling that your code is failing to update the partial view because you are getting a 404 Not Found error when trying to make an ajax call.

It is a good practice to take advantage of the HTML helper methods like Url.Action to generate the correct url to an action method. You can execute the Url.Action method in the razor view and keep the output of that(the url) in html 5 data attributes on the button.

<input type="button" id="btn" data-url="@Url.Action("LoadPartialView","MMC")"
                                                                 value="Click for Data" />

Now when click event happens, read the data attribute value and use that to make the ajax call.

$(function () {

    $('#btn').click(function (e) {
        e.preventDefault();
        $('#partial').load($(this).data("url"));
    });

});

Answer 2

Thanks to the great help from @sleeyuen, @Shyju, and @maccettura I got it working. I needed to add this to my view below the @{ViewBag.Title...} area:

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn').click(function (e) {
                $('#partial').load($(this).data("url"));
            });
        });
    </script>
    }

And the Ajax.BeginForm method wouldn't work because my project doesn't include jquery.unobtrusive-ajax.js. Hope this helps someone else down the line.