Menu
In a MVC partial view file, I build one Html.TextBox and two submit buttons. These two buttons will increase/decrease the Html.TextBox value once clicked. The Html.TextBox displayed value will change accordingly.However, once I need to update the #refTable div based on the new value after click. The page or section never updated. Codes are below, where some comments are added for explanation purpose. Thanks for your help.
//******* 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> 
233
Partial helper functions will not work with jQuery Client Side scripting. The Partial View will be populated and fetched using jQuery AJAX and finally it will be rendered as HTML inside DIV using jQuery.
In order to add Partial View, you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
Create a Partial View by right clicking the Views\Shared folder and select Add -> MVC 5 Partial Page (Razor) from the contextual menu. I name this partial view as _MyPartial. cshtml as by convention, name of the partial view would start with underscore(_) .
You cannot add Razor elements using JQuery because, as you have stated, JQuery is a client side library and ASP.NET using Razor syntax is a server side scripting language. If you want to add elements created using Razor syntax then add a hidden element to the page and use JQuery to add a clone of it to the DOM.
You'll need AJAX if you want to update a part of your page without reloading the entire page.
main cshtml view
<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> You'll need to add the fields I have omitted. I've used a <button> instead of submit buttons because you don't have a form (I don't see one in your markup) and you just need them to trigger javascript on the client side.
The HolidayPartialView gets rendered into html and the jquery done callback inserts that html fragment into the refTable div.
HolidayController Update action
[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); } This controller action takes the year parameter and returns a list of dates using a strongly-typed view model instead of the ViewBag.
view model
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> This is the stuff that gets inserted into your div.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
