使用jquery刷新页面的一部分

时间:2014-04-14 17:16:47

标签: jquery ajax asp.net-mvc razor

我有一个页面,这个html的一部分在it.i希望用户用ajax调用我的代码然后在我的代码会话中将更新然后我希望这个表更新与jquery.i做所有这些除了更新表用jquery.how我能做到吗???????????????

    <table>
<tr>
<td>Space</td>
<td>@Html.TextBox("BenchSpace", "", new { maxlength = 20, style = "width:80px;" })</td>
<table id="tblBench">
        <tr >
            <th >space</th>
            <th ></th>
         </tr>
            @if (Session["BenchList"] != null)
             {
                var BenchList= Session["BenchList"] as List<Common.Mines.Entities.Bench>;
                  foreach (var b in BenchList)
                   {
                      <tr class='tRow'>
                          <td class='tbody'>@b.BenchSpace </td>
                          <td class='tbody'><a href='#' title='Del' ></a>  </td>
                      </tr>
                     }
                  }
           </table>
         </tr>
         <tr>
           <td>
            <a href="#" id="InsertBench" class="insertBtn">Add</a>
           </td>
        </tr>
</table>
      $(document).on('click', "#InsertBench", function (e) {
          e.preventDefault();
          var url = '@Url.Action("SetBenchList")';
          var BenchSpace = ($.trim($('#BenchSpace').val()));
          $.post(url, { BenchSpace: BenchSpace }, function (data) {
                  if (data == "True") {
                    //how to update tblBench
                  }
              });
      });

//控制器

  public bool SetBenchList(decimal BenchSpace, bool ActionType)
        {
            var BenchList = new List<Common.Mines.Entities.Bench>();

            if (Session["BenchList"] != null)
                BenchList = Session["BenchList"] as List<Common.Mines.Entities.Bench>;

                BenchList.Add(new Common.Mines.Entities.Bench() { BenchSpace = BenchSpace });

                Session["BenchList"] = BenchList;
                return true;
            }
}

2 个答案:

答案 0 :(得分:0)

您需要做的就是创建一个ajax请求,然后通过该新数据更新表的内容。

你可以从这个开始

$.ajax({
  url: 'the_page's_url.cshtml'
  success: function (data) {
   $('#tableid').html(data);
  }
});

现在,ajax请求发回的数据将写入表中。您需要确保表格内容正常。

答案 1 :(得分:0)

我使用局部视图。

例如:

public PartialViewResult SetBenchList(decimal BenchSpace, bool ActionType)
        {
            var BenchList = new List<Common.Mines.Entities.Bench>();

            if (Session["BenchList"] != null)
             {
                BenchList = Session["BenchList"] as List<Common.Mines.Entities.Bench>;

                BenchList.Add(new Common.Mines.Entities.Bench() { BenchSpace = BenchSpace });

                Session["BenchList"] = BenchList;

            }
            return PartialView();
      }

您的部分观点:

@if (Session["BenchList"] != null)
             {
                var BenchList= Session["BenchList"] as List<Common.Mines.Entities.Bench>;
                  foreach (var b in BenchList)
                   {
                      <tr class='tRow'>
                          <td class='tbody'>@b.BenchSpace </td>
                          <td class='tbody'><a href='#' title='Del' ></a>  </td>
                      </tr>
                     }
                  }
$(document).on('click', "#InsertBench", function (e) {
          e.preventDefault();
          var url = '@Url.Action("SetBenchList")';
          var BenchSpace = ($.trim($('#BenchSpace').val()));
          $.post(url, { BenchSpace: BenchSpace }, function (data) {
                    //Update the data
                    $("table).html(data);
                  });
      });

由于

最好的问候