web-dev-qa-db-fra.com

Comment utiliser jquery ou ajax pour mettre à jour la vue partielle de rasoir en c #/asp.net pour un projet MVC

Dans un fichier de vue partielle MVC, je crée un Html.TextBox et deux boutons d'envoi. Ces deux boutons vont augmenter/diminuer la valeur Html.TextBox une fois cliqué. La valeur affichée Html.TextBox changera en conséquence. Cependant, une fois que je devrai mettre à jour la div #refTable en fonction de la nouvelle valeur après un clic. La page ou la section jamais mise à jour. Les codes sont indiqués ci-dessous, où des commentaires sont ajoutés à des fins d’explication. Merci de votre aide.

//* ** * *** fichier cshtml ** * ** * **** / /

<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>
asp.net-mvcjqueryc#-4.0razor
40
user2029505

Vous aurez besoin de AJAX si vous souhaitez mettre à jour une partie de votre page sans recharger toute la page.

Vue principale de 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>

Vous devrez ajouter les champs que j'ai omis. J'ai utilisé un <button> au lieu de boutons d'envoi parce que vous n'avez pas de formulaire (je n'en vois pas dans votre balisage) et que vous en avez juste besoin pour déclencher JavaScript au côté client.

Le HolidayPartialView est rendu en HTML et le callback jquery done insère ce fragment html dans le refTable div.

Action de mise à jour de 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);
}

Cette action du contrôleur prend le paramètre year et renvoie une liste de dates en utilisant un modèle de vue fortement typé au lieu du ViewBag.

voir modèle 

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>

C'est le truc qui est inséré dans votre div.

69
Jasen

Le concept principal de la vue partielle renvoie le code HTML plutôt que de passer à la vue partielle elle-même.

[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);
}

cette action renvoie le code HTML de la vue partielle ("HolidayPartialView").

Pour actualiser la vue partielle, remplacez l'élément existant par le nouvel élément filtré à l'aide de la requête jQuery ci-dessous.

$.ajax({
                url: "/Holiday/Calendar",
                type: "GET",
                data: { year: ((val * 1) + 1) }
            })
            .done(function(partialViewResult) {
                $("#refTable").html(partialViewResult);
            });
2
Ghebrehiywet

Vous pouvez également utiliser Url.Action pour le chemin à la place de la manière suivante: 

$.ajax({
        url: "@Url.Action("Holiday", "Calendar", new { area = "", year= (val * 1) + 1 })",                
        type: "GET",           
        success: function (partialViewResult) {            
            $("#refTable").html(partialViewResult);
        }
    });
0
Mike