[RESOLVED]Webgrid to partial edit page and then post changes

I am using the MVC format to create a page that has a webgrid and then you can select a row in the webgrid to show under the webgrid the details of that row and then you can edit them. I have been able to create the webgrid, setup a partial view that will
display with some details underneath the webgrid. But I am trying to post values of from the edit page back to the my controller but it is not working. My partial page is not a strongly typed view because I could not find any examples of how to pass a webgrid
selected row so I ended up following this method for creating my partial page: http://forums.asp.net/t/2010636.aspx?Webgrid+Questions

Here is my main webgrid page:

@{
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(format:@<text>@item.GetSelectLink("Edit")</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>

@if (grid.HasSelection)
{
var selectRow = grid.SelectedRow;
@RenderPage("_EditInventory.cshtml", new { SelectRow = selectRow });

Here is my _EditInventory partial view

@{
ViewBag.Title = "_EditInventory";
}

<h3>Selected Person</h3>

<fieldset>
<div class="editor-field">

Serial Number: <input type="text" name="serialnumber" value=@Page.SelectRow.SerialNumber><br>
<input id="button" type="submit" value="Submit" onclick="myFunction()">

</div>

</fieldset>

<script>
function myFunction() {
var url = ‘/Inventory/_EditInventory’
}
</script>

Here is my controller for both:

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

public ActionResult _EditInventory(int? serialnumber = null)
{
int t = 0;
if (serialnumber != null)
{
// t = Convert(int,serialnumber);
}

return PartialView(_db.ProjectInventories.ToList());
}

I know my _EditInventory view is not completed whatsoever but I have setup a debugger to see if it ever reaches the controller and it never does. 

Hi NEG1934,

Based on my understanding about your code ,It seems that you didn’t fire a request  to the action in your myFunction() javascript function. For you just put a url in the myFunction.

So the controller can never be achieved.

First , i suggest that you can set a breakpoint on the myFunction method, when you click the submit button, see if it has any error message.

Second, i suggest that you can try the code below to call the action in your controller:

$.ajax({
       //url: "/ControllerName/ActionName",
    url: '<%= Url.Action("ActionName", "ControllerName") %>',
    success: function(data) {
         // your data could be a View or Json or what ever you returned in your action method 
        //assign the data to html control
         alert(data);
    }
});

Best Regards,

Kevin Shen.

Thank you for your reply. I added your code and I get the below error:

JavaScript critical error at line 256, column 26 in http://localhost:49655/inventory?row=1nnSCRIPT1010: Expected identifier

I have no clue what that error means. Here again is my View code:

@{
ViewBag.Title = "_EditInventory";
}

<h3>Selected Person</h3>

<fieldset>
@Page.SelectRow.ProjectInventoryID @Page.SelectRow.SerialNumber
<div class="editor-field">

Serial Number: <input type="text" name="serialnumber" value=@Page.SelectRow.SerialNumber><br>
<input id="button" type="submit" value="Submit" onclick="myFunction()">

</div>

</fieldset>

<script>
function myFunction() {
// var url = ‘/Inventory/_EditInventory’
url: ‘<%= Url.Action("_EditInventory", "Inventory") %>’;
success: function(data) {
// your data could be a View or Json or what ever you returned in your action method

//assign the data to html control
alert(data)};
}
</script>

I have found that it tells me "Expected Identifier" where the function(data) is. Why would I get that?

<script>
function myFunction() {
// var url = ‘/Inventory/_EditInventory’
url: ‘<%= Url.Action("_EditInventory", "Inventory") %>’;
success: function(data) {
// your data could be a View or Json or what ever you returned in your action method 
//assign the data to html control
alert(data)};
}
</script>

Hi NEG1934,

First ,please  try to write a whole ajax request to your action controller like below:

function myFunction(){
$.ajax({
   url:'<%= Url.Action("_EditInventory", "Inventory") %>';
   type:'GET',
contentType:'application/json;charset=utf-8' dataType:'json', success:function(data){ alert(data); } }) }

Second, please set a breakpoint on the action ,check if it can be hit.

Best Regards,

Kevin Shen.

Thank you, that seems to work except I get this error now:

Unhandled exception at line 250, column 17 in http://localhost:59591/inventory?row=1

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

Any suggestions?

Hi NEG,

First,please make sure that the ajax can hit the action in the controller.

Second ,please try to use :

alert(data.d)

Best Regards,

Kevin Shen.

Hi Kevin,

It is not reaching the Action in the controller. Even with adding the alert(data.d) it still throws the error of data undefined. I am actually trying two different way of having a Webgrid and then selecting a row to edit the details. This thread is one way,
and I have another thread http://forums.asp.net/t/2012430.aspx?MVC+Webgrid+sending+an+ajax+request+data+is+undefined where I am trying a bit of a different
approach. But in both threads I am trying to call my controller with this ajax request but the variable "data" keeps coming back undefined. I do not understand why that is the case. 

Hi NEG1934,

I think the issue is that you still can not hit the action in the controller.

please check if you have set the right url to your controller.

Best Regards,

Kevin Shen.

What I found is I had a javascript function named myFunction in my main view and another one named the same thing in my partial view. After my partial was loaded it could not run again because it seems it did not know what function to run when triggered.
After I named them differently it worked. 

Leave a Reply