Passing textbox values from jqgrid to controller

[harshParticipant]

Hi,

I have few textboxes like (name, city , state , country) and a submit button. I would like to pass the values of the text boxes from jqgrid to controller methods. I have my code below. The problem is I am not able to get the value of the textbox it is always empty Can you please help me in thi ssituation.

Script is as follows:

var source = {
datatype: “json”,
datafields: [
{ name: ‘OfficeID’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘State’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ },
{ name: ‘PostalCode’, type: ‘string’ },
{ name: ‘StatusCd’, type: ‘string’ },
{ name: ‘UpdatedBy’, type: ‘string’ },
{ name: ‘UpdateTime’, type: ‘string’ }

],

url: “@Url.Action(“OfficeList”, “SearchForOffice”)”,
data: {
Name: function() { return $(“#Name”).val(); },
City: function() { return $(“#City”).val(); },
State: “State”,
Country: “Country”

}

}
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 950,
autorowheight: true,
autoheight: true,
source: dataAdapter,
selectionmode: ‘singlerow’,
filterable: true,

columns: [

//{ text: ”, datafield: ‘link’, width: 50, cellsrenderer: linkrenderer },
{
text: “Office ID”, datafield: “OfficeID”, width: 65
},
{
text: “Name”, datafield: “Name”, cellsrenderer: cellsrenderer, width: 150
},
{
text: “Address”, datafield: “Address”, width: 115
},
{
text: “City”, datafield: “City”, width: 85
},
{
text: “State”, datafield: “State”, width: 50
},
{
text: “Country”, datafield: “Country”, width: 60
}
]
});

HTML texboxes as follows

<tr>
<td><input type=”submit” name=”Search” id=”Search” /></td>
</tr>
<tr>
<td><b>Search By</b></td>
</tr>
<tr>
<td align=”right”>
Name
</td>
<td> </td>
<td>
<input type=”text” name=”Name” id=”Name” />
</td>
</tr>
<tr>
<td align=”right”>
City
</td>
<td> </td>
<td>
<input type=”text” name=”City” id=”City” />
</td>
</tr>

Controller action method as follows

public JsonResult OfficeList(string Name, string City, string State, string Country)
{

list = SO.GetList();

return Json(list, JsonRequestBehavior.AllowGet);
}

[VladimirParticipant]

Hello harsh,

You are trying to add a function as the value of a json object.

Instead of adding the data you need in the ‘data’ parameter, use the formatData callback function and override the object there.

Instead of:

data: {
Name: function() { return $(“#Name”).val(); },
City: function() { return $(“#City”).val(); },
State: “State”,
Country: “Country”
}

use

formatData: function (data){
   data.Name = $(“#Name”).val();
   data.City = $(“#City”).val();
   data.State = “State”;
   data.Country = “Country”;
}

Read the dataAdapter API for more information.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[harshParticipant]

Hi,

I have used formatData but I am not able to pass the value entered in textboxes to controller. Its is always empty. can you please let me know wer iam going wrong.

[VladimirParticipant]

Hello harsh,

Since you haven’t posted any code, I can only suggest to you that you place a debugger/break point in the formatData function and see if $('#Name').val() returns the desired value, and if not, try to find out why. Or if yes, then the problem is likely that the controller expects your data in a different way.

If it is a get request, then the data may be expected in a string format and then you may actually need something like:
data = data + '&Name=' + $('#Name').val();

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[harshParticipant]

$(“#Name”).val() is always empty when i hit submit button.

[VladimirParticipant]

Hello harsh,

Did you initialize the inputs using jqxInput?

.val() method is part of jqxInput, so in order for it to return any value, you need to initialize it:

$("#Name").jqxInput({
    height: 25,
    width: 200});

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts