[RESOLVED]MVC Webgrid sending an ajax request 'data' is undefined

I have a Webgrid on a page with a button that when selected I want it to show the details of that record for editing purposes. My main View is Index and the partial page I am trying to load in with editable fields is called EditInventory. I am trying to
load that partial view into my div named projectDetails. But when I click on Submit it gives me this error:

Unhandled exception at line 221, column 17 in http://localhost:59591/inventory

0x800a1391 – JavaScript runtime error: ‘data’ is undefined

Here is my Index View:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="test">
@{
var grid = new WebGrid(Model);
}
@grid.GetHtml(tableStyle: "grid",
selectedRowStyle: "selected",
columns: grid.Columns(
grid.Column("Test2",format: @<text><input id="button" type="submit" value="Submit" onclick="myFunction(@item.ProjectInventoryID)"></text>),
grid.Column("AssetType", "Asset Type", style: "assettype"),
grid.Column("CheckedIn", "Checked In"),
grid.Column("SerialNumber", "Serial Number"),
grid.Column("Installer", "Installer"),
grid.Column("IssueDate", "Issue Date"),
grid.Column("InstallDate", "Install Date"),
grid.Column("CheckInDate", "Checked In Date"),
grid.Column("Size", "Size"),
grid.Column("PrevInstaller", "Previous Installer"),
grid.Column("ProjectName", "Project Name")))
</div>

<div id="projectDetails">

</div>

<script>
function myFunction(id) {
$.ajax({
url: ‘/Inventory/EditInventory’,
type: ‘GET’,
data: { projectinventoryid: id },
datatype: ‘html’,
success: function(){
$(‘#projectDetails’).html(data);
}
});
}
</script>

@section Scripts {
@Scripts.Render("~/bundles/jquery")
}

Here is my EditInventory View:

@model FS.Models.ProjectInventory
<!–
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
–>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
<legend>ProjectInventory</legend>

@Html.HiddenFor(model => model.ProjectInventoryID)

<div class="editor-label">
@Html.LabelFor(model => model.SerialNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.SerialNumber)
@Html.ValidationMessageFor(model => model.SerialNumber)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.AssetType)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AssetType)
@Html.ValidationMessageFor(model => model.AssetType)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Installer)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Installer)
@Html.ValidationMessageFor(model => model.Installer)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.IssueDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IssueDate)
@Html.ValidationMessageFor(model => model.IssueDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.InstallDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.InstallDate)
@Html.ValidationMessageFor(model => model.InstallDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CheckedIn)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CheckedIn)
@Html.ValidationMessageFor(model => model.CheckedIn)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.AuditFlag)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AuditFlag)
@Html.ValidationMessageFor(model => model.AuditFlag)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CheckInDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CheckInDate)
@Html.ValidationMessageFor(model => model.CheckInDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Size)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Size)
@Html.ValidationMessageFor(model => model.Size)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.PrevInstaller)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PrevInstaller)
@Html.ValidationMessageFor(model => model.PrevInstaller)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ContainerID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ContainerID)
@Html.ValidationMessageFor(model => model.ContainerID)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ProjectId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProjectId)
@Html.ValidationMessageFor(model => model.ProjectId)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ProjectName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProjectName)
@Html.ValidationMessageFor(model => model.ProjectName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CompanyInventoryID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CompanyInventoryID)
@Html.ValidationMessageFor(model => model.CompanyInventoryID)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.EquipmentID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EquipmentID)
@Html.ValidationMessageFor(model => model.EquipmentID)
</div>

<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

Here are my Controllers:

public ActionResult Index()
{
return View(_db.ProjectInventories.ToList());
// return View(_db.ProjectInventories.ToList());
}

public ActionResult EditInventory(int? projectinventoryid = null)
{
if (projectinventoryid == 0)
{
var model1 = _db.ProjectInventories.Where(e => e.ProjectInventoryID == 1).Single(); ;
return PartialView(model1);
}
var model = _db.ProjectInventories.Where(e => e.ProjectInventoryID == projectinventoryid).Single();
// var model = _db.ProjectInventories.Where(e => e.ProjectInventoryID == projectinventoryid).Single();
return PartialView(model);
}

I figured out what was wrong. I needed to pass the data to the function. Then it rendered the partial view correctly:

function myFunction(id) {
$.ajax({
url: ‘/Inventory/EditInventory’,
type: ‘GET’,
data: { projectinventoryid: id },
datatype: ‘html’,
success: function(data){
$(‘#projectDetails’).html(data);
}
});
}

Leave a Reply