CODEWITHSUNDEEP
asp.net-mvc-3asp.net-mvc-partialview
OBL
OBL

Reputation: 1357

Edit pop up box for a grid design

I am writing a MVC3 project. Right now I have a table which has column with Data as actionLinks as:

<td style="color: Black; background-color: Bisque; text-align: center; width: 410px">
   @Html.ActionLink(@item.LookUp_NameString, "EditPartial", "Capitation", new { id = item.CAPITATION_RATE_ID }, new { @class = "actionLink" })
</td>

EditPartial as the name suggests is a partial view, which I need to be opened as a pop-up menu so that user can edit the details of the object, save it and we can come back to original page.

I have tried the render partial, but can't get it to pass the id value dynamically.

This is for edit functionality of my grid. What will be the best way to implement this?

Upvotes: 0

Views: 1107

Answers (1)

Shyju
Shyju

Reputation: 218732

If you want to open the result of EditPartial Action method in a model popup, you need some model popup code for that.

jQuery UI is one option. http://jqueryui.com/demos/dialog/

1) Include jQuery UI reference in your page,

2) Add the below script to your page which will convert your normal link to a model popup

<script type="text/javascript">
    $(function(){
        $(".actionLink").click(function (e) {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({                       
                        close: function (event, ui) {                            
                            dialog.remove();
                        },
                        modal: true,
                        width: 460, resizable: false
                    });
                }
            );           
            return false;           
        });
    });
    </script>

From your action result, you can return whatever markup you want to show in the Model popup. Mostly you will be returning a View. If you want to show a partial View,If it is an ajax request and show the normal view if it is a normal request, you can check the Request.IsAjaxRequest method to do that.

public ActionResult EditPartial(int id)
{
  CustomerViewModel objCustomer=GetCustomer(id);
  if(Request.IsAjaxRequest())
  {
     return View("Partial/Edit",objCustomer);
  }
  return View(objCustomer);

}

Assuming you have 2 views present to show your normal page and partial page (for model popup)

I prefer to name my action method as Edit instead of EditPartial, because it is handling both requests (ajax and normal)

Upvotes: 3

Related Questions