how to clear jqgrid when i click button in asp.net mvc

Question

hi ,i am new to jqgrid , i'm placing the code what i did .my question is that when i click html button i need to refresh the grid value with new values?how i pass paramateres to controller?

thanks in advance

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
 <link rel="stylesheet" type="text/css" href="/scripts/themes/coffee/grid.css" 
  title="coffee" media="screen" />
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="/Scripts/js/jqDnR.js" type="text/javascript"></script>

<script type="text/javascript">

  jQuery(document).ready(function() {
      $("#btnSearch").click(function() {
          jqGridContainer.dir.
          var StateId = document.getElementById('StateId').value;
          var CityId = document.getElementById('CityId').value;
          var HName = document.getElementById('HospitalName').value;
          alert(CityId);
          alert(StateId);
          alert(HName);
          if (StateId > 0 && CityId == '' && HName == '') {
              CityId = 0;
              HName = 'Default'.toString();
              alert("elseif0" + HName.toString());
          }
          else if (CityId > 0 && StateId == '') {
              alert("elseif1");
              alert("Please Select State..")
          }
          else if (CityId > 0 && StateId > 0 && HName == '') {
              alert("elseif2");
              alert(CityId);
              alert(StateId);
              HName = "Default";
          }
          else {
              alert("else");
              StateId = 0;
              CityId = 0;
              HName = "Default";
          }
          //            $("#Submit1").click(function() {
          //            //{  function gridReload() {
          //                  //var customer = $(this).val();
          //                  $('#list').setGridParam({ url: '/Claim/DynamicGridData/?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName, page: 1
          //                  }).trigger("reloadGrid");
          //  Submit1.trigger("reloadGrid");
          jQuery("#list").jqGrid({
              url: '/Claim/DynamicGridData/?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName,

              datatype: 'json',
              mtype: 'GET',
              colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'],
              colModel: [{ name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' },
                           { name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' },
                           { name: 'Address1', Address: 'Address1', width: 300 },
                           { name: 'CityName', index: 'CityName', width: 100 },
                           { name: 'DistName', index: 'DistName', width: 100 },
                           { name: 'FaxNo', index: 'FaxNo', width: 100 },
                           { name: 'ContactNo1', index: 'PhoneNumber', width: 100 }
                        ],
              jsonReader: {
                  repeatitems: true,
                  id: "0"
              },
              pager: jQuery('#pager'),
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              // sortname: 'Id,',
              sortname: '1',
              sortorder: "asc",
              viewrecords: true,
              //multiselect: true,
              //multikey: "ctrlKey",
              imgpath: '/scripts/themes/coffee/images',
              caption: 'Hospital Search',
              width: 700,
              height: 250
          });

      });
  });

</script> 

<%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" })) --%>

Hospital Search   State :   City :   Hospital Name :     S.No Hospital Name Address City District Fax Number Phone Number

--%>  

    <div id="jqGridContainer">  
       <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

    </div>

Answer 1

From completely a jqGrid approach, I'd update the url and trigger a reload:

    jQuery("#list").jqGrid("setGridParam", {
        url: "feed.aspx?params" = yourParams,
        page: 1
    });

    jQuery("#list").trigger("reloadGrid");

Based on the code above, I'd guess you'd need the following:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#list").jqGrid({
        url: '/Claim/DynamicGridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'],
        colModel: [
            { name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' },
            { name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' },
            { name: 'Address1', Address: 'Address1', width: 300 },
            { name: 'CityName', index: 'CityName', width: 100 },
            { name: 'DistName', index: 'DistName', width: 100 },
            { name: 'FaxNo', index: 'FaxNo', width: 100 },
            { name: 'ContactNo1', index: 'PhoneNumber', width: 100 }
        ],
        jsonReader: {
            repeatitems: true,
            id: "0"
        },
        pager: '#pager',
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: '1',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/scripts/themes/coffee/images',
        caption: 'Hospital Search',
        width: 700,
        height: 250
    });
});

$("#btnSearch").click(function() {
    var StateId = document.getElementById('StateId').value;
    var CityId = document.getElementById('CityId').value;
    var HName = document.getElementById('HospitalName').value;
    if (StateId > 0 && CityId == '' && HName == '') {
        CityId = 0;
        HName = 'Default'.toString();
    }
    else if (CityId > 0 && StateId == '') {
        alert("Please Select State..")
    }
    else if (CityId > 0 && StateId > 0 && HName == '') {
        HName = "Default";
    }
    else {
        StateId = 0;
        CityId = 0;
        HName = "Default";
    }

    jQuery("#list").jqGrid("setGridParam", {
         url: url: '/Claim/DynamicGridData/?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName,
         page: 1
    });

    jQuery("#list").trigger("reloadGrid");
});
</script>

<button id="btnSearch">Search</button>
<table id="list"></table>
<div id="pager"></div>