Question

基本上，我正在构建一个日历，人们可以通过单击单元格并通过Ajax请求发送数据来添加会议。这部分已经运行良好，但我无法弄清楚如何将正确的参数传递给Index（）视图。

修改我现在的问题在于Ajax函数将结果返回给页面。我试图在jQuery Ajax中做相当于MVC Ajax选项 UpdateTargetId 但是我无法想出这样做的充分方法。

我目前的Ajax功能：

function AjaxAddRDV() {

    $.ajax({
        url: "/Agenda/AddRDV",
        async: "true",
        type: "GET",
        data: { "jour": rdvjour.val(), "mois": rdvmois.val(), "annee": rdvannee.val(), "text": rdvtext.val() },
        success: function (result) {

            $(".cal-container").html(result);  // This gives me the right result but my click events do not work anymore

            /*if (data && data.successUrl) {
                window.location.href = data.successUrl;
            }*/ this reloads the page, which I am trying to avoid
        }

    });
}

注意：我的HTML从ViewModel获取数据，并使用传递给模型的月份和年份创建一个表，给定正确的参数，它永远不会失败。

public ActionResult Index(int annee = 0, int mois = 0)
{
        DateTime date = DateTime.Now;

        if (annee == 0) annee = date.Year;
        if (mois == 0) mois = date.Month;

        AgendaViewModel Agendata = CreateAgendaViewModel(annee, mois);

        if (dal.GetFirstDay(annee, mois) == 0)
        {
            return View("Error");
        }
        return View(Agendata);
}

当Ajax添加新约会时会触发此方法： // 我是根据原始问题编辑的

   public ActionResult AddRDV(int jour, int mois, int annee, string text)
    {
        AgendaViewModel Agendata = new AgendaViewModel();
        if (!string.IsNullOrWhiteSpace(text))
        {
            dal.SetRdv(jour, mois, annee, text);
            Agendata = CreateAgendaViewModel(annee, mois);
        }
        return PartialView("Calendrier", Agendata);
    }

我正在尝试更新的HTML如下：

@model DASIWelcome.ViewModels.AgendaViewModel
 (...)
 <body>
    <div id="wrapper">
        <div id="prevmonth" class="switchmonth">←</div>
        <div class="cal-container">

            @Html.Partial("Calendrier",Model)
        </div>
        <div id="nextmonth" class="switchmonth">→</div>
    </div>
 </body>

我每次发送Ajax请求时都试图更新@ Html.Partial。

最终目标是默认情况下使用Ajax函数刷新当前日历的日历，如果更改了月份，则会返回带有自定义参数的相同日历，如果是新约会添加，等等。

我最近刚开始使用C＃MVC，但我花了一整天的时间来解决这个问题，而且我找不到一个不是很难看且不推荐的解决方案...

任何帮助将不胜感激！

我尝试过的事情：

使用参数构建第二个索引方法 - 加载失败，说它是不明确的
找出哪个方法首先在行动之间分配一个名为index的方法 - 没有工作+在我看来的任何地方都被认为是一个丑陋的解决方案
哭泣

之前的问题已经解决，以下是我在努力奋斗的地方，这让我无法前进：

点击功能无法处理动态创建的元素，因此每页加载只能处理一次。
起初我无法获得jQuery Ajax函数来刷新我的表，就像MVC Ajax UpdateTargetId函数一样。

以下是我修复点击事件的方法：

$("#wrapper").on("click", ".week td", function(){

我在on（）函数中难以理解的是第一个选择器 $（“＃wrapper”）必须是 static ，而第二个选择器“。week td”是动态创建的元素的选择器。

由于我试图修复错误的东西，我确实找到了MVC Ajax UpdateTargetId和jQuery Ajax之间的等价物：的 jQuery的：

$.ajax({
            url: "/Agenda/AddRDV",
            async: "true",
            type: "GET",
            data: { "jour": rdvjour.val(), "mois": rdvmois.val(), "annee": rdvannee.val(), "text": rdvtext.val() },
            success: function (result) {
                $("#cal-container").html(result);
            }
        });

MVC Ajax：

@using (Ajax.BeginForm("AddRDV", new AjaxOptions {
HttpMethod = "GET",
//InsertionMode = InsertionMode.Replace, 
UpdateTargetId = "cal-container",
OnComplete = "rdvdialog.dialog('close')"
}))
{
    <label for="rdvannee">Année</label>
    <label for="rdvmois">Mois</label>
    <label for="rdvjour">Jour</label>
    <br />
    <input type="text" name="annee" id="rdvannee" maxlength="4" size="4" />
    <input type="text" name="mois" id="rdvmois" maxlength="2" size="2" />
    <input type="text" name="jour" id="rdvjour" maxlength="2" size="2" />
    <br />
    <br />
    <label for="rdvtext">Titre</label><br />
    <input type="text" name="text" id="text" maxlength="250" />
    <input type="submit" name="Envoyer" value="Envoyer" />
}

特别感谢 dlght ，他指出了我正确的方向并为我提供了一些有用的选择！

Answer 1

你的＆＃34; ChangeMonth＆＃34;方法与Index方法相同，但是带参数。当用户更改日历时，只需重新加载索引。我甚至建议您创建一个处理ViewModel创建的函数，这样您就可以在其他ActionMethods中重用该模型如果你需要它：

public AgendaViewModel CreateAgendaViewModel(int annee, int mois)
{
            AgendaViewModel agendata = new AgendaViewModel();

            agendata.ListRDV = dal.GetListRDV(mois, annee); //Loads the list of appointments for the chosen month
            agendata.FirstDay = dal.GetFirstDay(annee, mois);
            agendata.MonthLength = dal.GetMonthLength(annee, mois);
            agendata.MonthName = dal.GetMonthName(mois) + " " + annee.ToString();
            agendata.Mois = mois;
            agendata.Annee = annee;

            return agendata;
}

public ActionResult Index(int annee = 0, int mois = 0)
{
        DateTime date = DateTime.Now;
        if(annee == 0) annee = date.Year; // if not set initialize with default year
        if(mois == 0)  mois = date.Month; // if not set initialize with default month

        AgendaViewModel Agendata = CreateAgendaViewModel(annee, mois);
        if (dal.GetFirstDay(annee, mois) == 0)
        {
            return View("Error");
        }
        return View(Agendata); 
    }

现在，在add方法中，您可以使用所选的月份和年份重定向到索引：

public ActionResult AddRDV(int jour, int mois, int annee, string text)
{
        if (!string.IsNullOrWhiteSpace(text))
        {
            dal.SetRdv(jour, mois, annee, text);
        }
        return RedirectToAction("Index", new { annee = annee, mois = mois });
}

另一个注意事项 - 请用英文写下您的代码。如果您不仅为自己命名参数和变量，而且为可能查看代码的其他人命名，那么您的代码将更具可读性。

希望这会有所帮助;]

编辑：

有两种方法可以从ajax函数重定向： 1）如果页面上没有其他功能，您可以通过在成功时传递带有URL路由的Json结果来重新加载整个页面：

public JsonResult AddRDV(int jour, int mois, int annee, string text)
{
        if (!string.IsNullOrWhiteSpace(text))
        {
            dal.SetRdv(jour, mois, annee, text);
        }
        var successUrl = Url.Action("Index", new { annee = annee, mois = mois });
        return Json(new {successUrl = successUrl});
}

Then in your ajax you do redirect to the index page:
$.ajax({ ...,
    success: function(data) {
        if(data && data.successUrl){
            window.location.href = data.successUrl;
        }
    }
});

2）您可以更改逻辑，以便在页面内部加载的局部视图中创建日历。然后，您可以通过调用重新加载日历包装的ajax来重新加载部分视图 - 您可以查看此here的示例

Answer 2

看起来你试图用同一种方法（索引）完成几件事。

选项1

发布数据时，FormCollection会收到Index个对象。因此，可以在表单集合中检索发布的内容。然后，您的代码可以了解接收的数据并正确分配到正确的方法。

代码如下所示：

[HttpPost]
public ActionResult Index(FormCollection formCollection)
{
    var myValue = formCollection["myvalue"];
}

选项2

第二个选项是使用和调用不同的方法，但使用相同的View()。视图的输出如下所示：

public ActionResult OtherAction(string param1)
{
    var model = this.GenerateModel(param1);

    // Use the index View (assuming the controller is called Calendar
    return View("Calendar/Index", model );
}

第二个选项（您在问题中尝试过）的问题在于它做了太多事情。我认为日期应该是一个参数。您还应该在单独的函数中构建模型。这样，将更正的参数发送到“模型生成器”并获得预期的输出会更容易。

哭泣无助于修复你的代码......但它可能会减轻你的痛苦。 ; - ）

无法在C＃MVC中返回具有不同参数的View（） - Ajax更新页面内容的问题

2 个答案: