asp.net-mvc – 如何在c#/ asp.net中使用jquery或ajax来更新razo
发布时间:2020-12-15 18:47:00 所属栏目:asp.Net 来源:网络整理
导读:在MVC部分视图文件中,我构建一个Html.TextBox和两个提交按钮。一旦点击,这两个按钮将增加/减少Html.TextBox值。 Html.TextBox显示的值将相应地改变。然而,一旦我需要在点击之后根据新值更新#refTable div。页面或部分从未更新。下面的代码是为了说明目的
在MVC部分视图文件中,我构建一个Html.TextBox和两个提交按钮。一旦点击,这两个按钮将增加/减少Html.TextBox值。 Html.TextBox显示的值将相应地改变。然而,一旦我需要在点击之后根据新值更新#refTable div。页面或部分从未更新。下面的代码是为了说明目的添加了一些注释。谢谢你的帮助。
// ******* cshtml file ********** // <body> </body> <input type="submit" value="PrevY" name="chgYr2" id="pY" /> @{ var tempItem3 = Model.First(); // just give the first entry from a database,works. if (ViewData["curSel"] == null) { @Html.TextBox("yearSelect3",Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString()); ViewBag.selYear = Convert.ToDateTime(tempItem3.Holiday_date).Year; // just initial value,works ViewData["curSel"] = Convert.ToDateTime(tempItem3.Holiday_date).Year; } else { @Html.TextBox("yearSelect3",ViewData["curSel"].ToString()); } } <input type="submit" value="NextY" name="chgYr2" id="nY" /> <script type="text/javascript"> $(document).ready(function () { $(document).on("click","#nY",function () { var val = $('#yearSelect3').val(); $('#yearSelect3').val((val * 1) + 1); var dataToSend = { id: ((val * 1) + 1) } // add some jquery or ajax codes to update the #refTable div // also ViewBag.selYear need to be updated as ((val * 1) + 1) // like: ViewBag.selYear = ((val * 1) + 1); // any similar temp variable is fine }); }); $(document).on("click","#pY",function () { var val = $('#yearSelect3').val(); $('#yearSelect3').val((val * 1) - 1); var dataToSend = { id: ((val * 1) - 1) } }); }); </script> <span style="float: right"><a href="/">Set Holiday Calender for 2013</a></span> <span id="btnAddHoliday">@Html.ActionLink("Add Holiday","Create",null,new { id = "addHilBtn" })</span> <div id="refTable"> <table class="tblHoliday" style="width: 100%;"> <th> Holiday </th> <th> Dates </th> <th>Modify</th> <th>Delete</th> </tr> @foreach (var item in Model) { if ( Convert.ToDateTime(item.Holiday_date).Year == ViewBag.selYear) // if the ViewBag.selYear is hard code,this selection "works" { <tr> <td> @Html.DisplayFor(modelItem => item.Holiday_Name) </td> <td> @item.Holiday_date.Value.ToString("MM/dd/yyyy") </td> <td> @Html.ActionLink("Edit","Edit",new { }) </td> <td> @Html.ActionLink("Delete","Delete",new { }) </td> </tr> } } </table> </div> 解决方法
如果要更新页面的一部分而不重新加载整个页面,则需要使用AJAX。
主cshtml视图 <div id="refTable"> <!-- partial view content will be inserted here --> </div> @Html.TextBox("yearSelect3",Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString()); <button id="pY">PrevY</button> <script> $(document).ready(function() { $("#pY").on("click",function() { var val = $('#yearSelect3').val(); $.ajax({ url: "/Holiday/Calendar",type: "GET",data: { year: ((val * 1) + 1) } }) .done(function(partialViewResult) { $("#refTable").html(partialViewResult); }); }); }); </script> 您需要添加我省略的字段。我使用了< button>而不是提交按钮,因为你没有一个表单(我没有看到一个在你的标记),你只需要他们在客户端触发javascript。 将HolidayPartialView渲染成html,并将jQuery完成的回调将html片段插入到refTable div中。 HolidayController更新操作 [HttpGet] public ActionResult Calendar(int year) { var dates = new List<DateTime>() { /* values based on year */ }; HolidayViewModel model = new HolidayViewModel { Dates = dates }; return PartialView("HolidayPartialView",model); } 该控制器操作采用year参数,并使用强类型视图模型而不是ViewBag返回日期列表。 查看模型 public class HolidayViewModel { IEnumerable<DateTime> Dates { get; set; } } HolidayPartialView.csthml @model Your.Namespace.HolidayViewModel; <table class="tblHoliday"> @foreach(var date in Model.Dates) { <tr><td>@date.ToString("MM/dd/yyyy")</td></tr> } </table> 这是插入你的div的东西。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
推荐文章
站长推荐
- asp.net-mvc – ASP.NET MVC:Action中的授权 –
- 可用.net控件库的比较
- asp.net – LINQ查询,其中boolean值为true或fals
- asp.net-mvc-3 – VSTS错误SerializationExcepti
- asp.net – GET与POST真的很重要吗?
- asp.net-mvc – datetime.parse用西班牙语进行游
- 在ASP.net中创建一个弹出窗口以获取用户输入
- 下载期间的ASP.net内存使用情况
- asp.net-mvc – ASP.NET MVC 6中的文件IO Close(
- asp.net-mvc-3 – TextBoxFor vs EditorFor,和ht
热点阅读