why partial view not loading - asp.net-mvc-3-areas

Question

I have jquery like this and i am trying to load partial view but it not working it shows dialog box without any control
mvcJqGrid.demo.edit = function(id) {
var grid = $('#Products');
var myCellData = grid.jqGrid('getCell', id, 'ProductId');
GetProduct(myCellData);
return false;
};
function GetProduct(id)
{
$("#dialog-form").load("#Url.Action("EditProduct","Admin")",
function (response, status, xhr) {
$("#dialog-form").dialog('open');
});
} ;
my action is:
[HttpPost]
public ActionResult EditProduct(string productId)
{
int id = 0;
Product product = null;
bool result = int.TryParse(productId,out id);
ProductModel productModel=new ProductModel();
Session["ProductModule"] = productModel.GetProduct(id);
return PartialView("Product_Partial", Session["ProductModule"] as ProductModel);
//return RedirectToAction("Product", "Admin");
}
my Partial View is:
#using (Html.BeginForm("Product","Admin",method:FormMethod.Post))
{
<fieldset>
<legend>Product Information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.ProductTitle)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ProductTitle)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.ProductTypeId)
</div>
<div>
<select name="ProductType">
<option value="null">Select ProductType</option>
#foreach (var row in new Database("MyConnectionString").Query<LookUp>("select * from Lookup where LookupTypeId=(select LookupTypeId from LookupType where LookupTypeName=#0)", "ProductType"))
{
<option value="#row.LookupId">#row.LookupName</option>
}
</select>
</div>
<div class="editor-label">
#Html.LabelFor(m => m.BrandId)
</div>
<div >
<select name="Brand">
<option value="null">Select Brand</option>
#foreach (var row in new Database("MyConnectionString").Query<LookUp>("select * from Lookup where LookupTypeId=(select LookupTypeId from LookupType where LookupTypeName=#0)", "Brand"))
{
<option value="#row.LookupId">#row.LookupName</option>
}
</select>
</div>
<div class="editor-label">
#Html.LabelFor(m => m.BasePrice)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.BasePrice)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.ProductSpecification)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ProductSpecification)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.ProductSummary)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ProductSummary)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.IsOutOfStock)
</div>
<div class="ui-icon-check">
#Html.CheckBoxFor(m => m.IsOutOfStock)
</div>
<table>
<tr>
<td>
<input type="submit" value="Add" onclick="#Url.Action("Product", "Admin")" />
</td>
<td>
<button type="submit" id="btnDelete" name="Command" value="Update" onclick="#Url.Action("Product", "Admin")" >Update</button>
</td>
<td>
<button type="submit" id="btnSearch" name="Command" value="Delete" onclick="#Url.Action("Product", "Admin")">Delete</button>
</td>
</tr>
</table>
</fieldset>
}
my view page :
<div id="dialog-form" title="Add New Product">
</div>

Answer 1

I don' t see the initialization of the plugin here..
i see directly :
$("#dialog-form").dialog('open');
but where initialize you the dialog with options ?
i think that you should initialize dialog in your success response instead of calling directly the function 'open'.
Look at doc jquery ui dialog
$("#dialog-form").load("#Url.Action("EditProduct","Admin")",
function (response, status, xhr) {
$( "#dialog-form" ).dialog();
});
I hope that'll help you