How to call jQuery popup window with a partial view in it?

Question

in my MVC web apps, I need to create a popup window with a Partial view (contains webgrid) in it, The problem is the partial view data did not show on the dialogbox, I only see the title. it seems I have problem with the controller call, as well, please be noted I used dynamic model creation since the model was created dynamically in the controller, not an existing model, no sure how to use this type of model. Thanks for any help, This is my codes: this is button in razor view: this jQuery codes:

  $(document).ready(function () {
            $("#GetEmp").click(function (event) {
                $("#popup").dialog({
                    width: 200,
                    hight: 400,
                    title: 'please select an employee',
                    modal: true,
                    open: function (event, ui) {
                        $(this).load("@Url.Action("Travel", "GetEmployee")");
                    }

                });
            });
        });

This is controller code:

    public class Employee
    {
        public string EmpName;
        public string EmpPhone;
        public string EmpNum;
    }

    [HttpPost]
    public ActionResult GetEmployee()
    {
        List<Employee> Emp = new List<Employee>
        {
               new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
               new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
               new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
                  EmpNum="345353"}

         };

        return PartialView("_EmpPartial", Emp );
    }

And this is Employee partial view: please note, I am using dynamic in model, since the model is created dynamically.

 @model dynamic
 <ul>
 @foreach (var emp in Model) {
   <li>
     @emp.EmpName
   </li>   
   } 
  </ul>

Hi, thanks for the quick response, I tried it, Remove [HttpPost] and changed @foreach to @foreach (var emp in Model as List), but the does not compile with a red underline in it. do I have to keep @model dynamic in my partial view?

Answer 1

You are passing Emp as view model, which is not a dynamic object, so you should not use dynamic inside the view. I would use @model List<Employee> in the view.

Also, to load the content, you are performing $(this).load("@Url.Action("Travel", "GetEmployee")"); which will send a GET request to your server, but you assigned the [HttpPost] attribute to your controller, so it won't serve a get request. I would remove the [HttpPost].

UPDATE:

A better solution would be to create a ViewModel class like this:

namespace Travelmvc.ViewModels
{
    public class EmployeeListViewModel
    {
        public List<Employee> Emp { get; set; }
    }
}

In my projects, I like creating a ViewModels directory where I put all my view models. Some people simply put there ViewModels in the Models directory though. Depending on where you put your ViewModel, you will have to adjust the namespace above.

You will also need to add the following line at the top of the controller file so that the controller knows about your ViewModels:

using Travelmvc.ViewModels;

Then you would use it like this in your controller:

public ActionResult GetEmployee()
{
    var employeeList = new EmployeeListViewModel {
        Emp = new List<Employee>
        {
           new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
           new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
           new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
              EmpNum="345353"}

        }
    };

    return PartialView("_EmpPartial", employeeList );
}

And your view would look like this:

@using Travelmvc.ViewModels
@model EmployeeListViewModel
<ul>
@foreach (var employee in Model.Emp) {
   <li>
     @employee.EmpName
   </li>   
} 
</ul>

UPDATE 2:

If you need to use a dynamic object to pass the data to the view, you can use the one that already exists and that is called ViewBag. Then your controller would look like this:

using Travelmvc.Models;

public ActionResult GetEmployee()
{
    ViewBag.Emp = new List<Employee>
    {
       new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
       new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
       new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
              EmpNum="345353"}

    };

    return PartialView("_EmpPartial");
}

The using directive would actually go at the top of your controller file.

And your view would not be strongly typed, and it would look like this:

@using Travelmvc.Models
<ul>
@foreach (var employee in ViewBag.Emp as List<Employee>) {
   <li>
     @employee.EmpName
   </li>   
} 
</ul>

In order for this to work, both your controller and your view will need to be aware of the Employee class, hence the using directives. You may need to adjust the namespace depending on where you put your Employee class. In the code above, I am assuming you put it in Models\Employee.cs:

namespace Travelmvc.Models
{
    public class Employee
    {
        public string EmpName { get; set; }
        public string EmpPhone { get; set; }
        public string EmpNum { get; set; }
    }
}

UPDATE 3:

Here is the JavaScript I would use. I would perform the load before opening the dialog, and I would open it only if the load succeeded.

$(document).ready(function () {
    $("#GetEmp").click(function (event) {
        $("#popup").load('@Url.Action("GetEmployee", "Travel")', function (responseText, textStatus, XMLHttpRequest) {
            if (textStatus == "error") {
                alert("Error");
            } else {
                $(this).dialog({
                    width: 200,
                    hight: 400,
                    title: 'please select an employee',
                    modal: true });
            }
        });
    });
});

Answer 2

Change your controller as:

public ActionResult GetEmployees()
{
    var employeeList = new EmployeeListViewModel {
        Emp = new List<Employee>
        {
           new Employee {  EmpName= "ScottGu", EmpPhone = "23232323", EmpNum="242342"},
           new Employee { EmpName = "Scott Hanselman", EmpPhone = "3435353", EmpNum="34535"},
           new Employee { EmpName = "Jon Galloway", EmpPhone = "4534535345345",   
              EmpNum="345353"}

        }
    };

    return Json(RenderPartialView("_EmpPartial", employeeList ));
}

protected string RenderPartialView(string partialViewName, object model = null)
        {
            if (ControllerContext == null)
                return string.Empty;

            if (string.IsNullOrEmpty(partialViewName))
                throw new ArgumentNullException("partialViewName");

            ModelState.Clear();//Remove possible model binding error.

            ViewData.Model = model;//Set the model to the partial view

            using (var sw = new StringWriter())
            {
                var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, partialViewName);
                var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

And your jquery would be like:

$(document).ready(function () {


      $("#GetEmp").click(function (event) {
        $.post('@Url.Action("Travel", "GetEmployee")', {}, function(resp){
             $('#popup').html(resp);
         });
                $("#popup").dialog({
                    width: 200,
                    hight: 400,
                    title: 'please select an employee',
                    modal: true,

                });
            });
        });