passing value from javascript to ajax in mvc4

Question

i need to select a value from a grid and pass it to ajax. I'm getting the error as "Id undefined". can anyone suggest me a solution for this issue. Records most be deleted which a presented in grid. on clicking the button selected value must got to ajax function for deletion process. value s moved to ajax but getting error that the policyid is undefined Thanks in advance.

Code of grid column:

@{
    var grid = new WebGrid(Model.Policy, rowsPerPage: 20, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridcal");
              grid.Pager(WebGridPagerModes.NextPrevious);}
    @grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    columns:
        grid.Columns(
        grid.Column("PolicyName","Policy Name",style: "colWidth"),
        grid.Column("PolicyValue","Policy Value",style: "colWidth"),
       // grid.Column ("Delete",format:@<text><a href="@Url.Action("DeletePolicy","Roles",new{PolicyId=item.PolicyId.ToString()})"><img src="~/Images/img-delete-blk-icon.png" width="9" height="9" alt="Delete"/></a> </text>)
        ****grid.Column(format: @<text><input type="image"  onclick="AJAXCall_Fun_DeletePolicy()" src="~/Images/img-delete-blk-icon.png" name="image" width="9" height="9" /></text>)****


            ))

             @if (grid.HasSelection)
                    {

                        <b>Policy Name</b>@AppliedPolicies.PolicyName<br />
                        <b>Policy Value</b>@AppliedPolicies.PolicyValue<br />

                    }

Ajax :

 function AJAXCall_Fun_DeletePolicy() {

    if ($.xhrPool.length > 0) {
        $.each($.xhrPool, function (idx, jqXHR) {
            if (jqXHR) {
                this.abort();
            }
        });
        $.xhrPool = [];
    }


  var PolicyId = PolicyId();
    if (PolicyId.length > 0) {
        $.ajax({

            type: "GET",
            url: "/Roles/DeletePolicy",
            data: { 'PolicyId': JSON.stringify(PolicyId) },
            async: true,
            cache: false,
            datatype: "json",

Controller code:

    public JsonResult DeletePolicy(string PolicyId)
    {
        bool status = false;
        using (clsBLLGroups objclsBLLGroups = new clsBLLGroups())
        {
            status = objclsBLLGroups.DeletePolicy(UserCookieWrapper.UserAccessToken, PolicyId.ToString());


        }
        return Json(status, JsonRequestBehavior.AllowGet);
    }

Answer 1

a web grid renders as a table so use Get id of selected row in a table -HTML to get the id of clicked row and you can pass that through your ajax call to the controller.
You mentioned PolicyId is controller code. If you want to include a value from your model in your ajax call you just need to use @

var PolicyId = '@(Model.PolicyId)';

you can use that for your url as well. We use

url: '@Url.Action("DeletePolicy", "Roles")',

for our url. Hope this helps