how to clear jqgrid when i click button in asp.net mvc_问答_开发者

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,
              heig开发者_开发知识库ht: 250
          });

      });
  });

</script>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" }))
--%>




 <table cellspacing="0" cellpadding="2" width="100%" border="0" >
        <tr>
            <td class ="Heading1">
                Hospital Search</td>
            <td class ="Heading1" align="right" width="50%" 
                    background="../images/homebg.gif">
               &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2" >
               <% Html.RenderPartial("InsuredDetails"); %>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width="100%">
                    <tr>
                        <td class="subline" valign="middle">
                         State :  <% =Html.DropDownList("StateId", (SelectList)ViewData["States"], "--Select--", new { @class = "ddownmenu"  })%>  
                        &nbsp; City :  <% =Html.DropDownList("CityId", (SelectList)ViewData["Cities"], "--Select--", new { @class = "ddownmenu" })%>
                        &nbsp; Hospital Name :  <% =Html.TextBox("HospitalName")%>  &nbsp; 
                        &nbsp; <input id="btnSearch" type="submit" value="Search" />
      <input id="Submit1" type="submit" value="Search" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>   
        <%--    <tr>
            <td colspan="2">

                <table style="width: 100%" id="AlternatetableColor" class="grid" >
                    <tr align="center" style="color:White;background-color:#507CD1;">
                        <th align="left" scope="col" style="font-weight:bold;">S.No</th>
                        <th align="left" scope="col" style="font-weight:bold;">Hospital Name</th>
                        <th align="left" scope="col" style="font-weight:bold;">Address</th>
                        <th align="left" scope="col" style="font-weight:bold;">City</th>
                        <th align="left" scope="col" style="font-weight:bold;">District</th>
                        <th align="left" scope="col" style="font-weight:bold;">Fax Number</th>
                        <th align="left" scope="col" style="font-weight:bold;">Phone Number</th>
                    </tr>
                    <%
                        int i=1;
                        if (ViewData["Hospitaldetails"] != null)
                        {
                    %>

                    <% foreach (ClassRepository.Hospital hosp in (IList)ViewData["Hospitaldetails"])
                       { %>
                            <% ++i; %>
                           <tr class="tablecolor" align="left">
                           <td align="left" width="4%"><p><%= i%></p></td>
                           <td align="left" width="30%"><p><%= Html.Encode(hosp.HospitalName)%></p></td>
                           <td align="left" width="30%"><p><%= Html.Encode(hosp.Address1)%></p></td>
                           <td align="left" width="9%"><p><%= Html.Encode(hosp.City1.CityName)%></p></td>
                           <td align="left" width="9%"><p><%= Html.Encode(hosp.City1.Districtiesdetails.DistName)%></p></td>
                           <td align="left" width="9%"><p><%= Html.Encode(hosp.FaxNo)%></p></td>
                           <td align="left" width="9%"><p><%= Html.Encode(hosp.ContactNo1)%></p></td>

                    </tr>

                    <%} %> 

                    <%} %>

                </table>
            </td>
        </tr>--%>
        <tr>
            <td align="center" colspan="2">

        &nbsp;</td>
        </tr>
    </table>
        <div id="jqGridContainer">  
               <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
            </div>
    </asp:Content>

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>