Question

有点难以在标题中解释这个问题但是我做得最好..这是关于使用主视图中的Javascript的部分视图。因此，我建立了一个使用向导驱动的注册表单的网站。我使用了本教程http://tech.queryhome.com/138560/creating-wizard-in-asp-net-mvc-part-2

我有一个主视图（Register.cshtml），它包含用于加载部分视图的div。用户在步骤1中输入一些数据，然后在步骤2中输入，依此类推。在步骤1中，我有一个日期选择器供用户选择日期。输入字段（id为datetimepicker2）使用som JavaScript，如下所示。加载Register.cshtml并显示步骤1的局部视图时，它工作正常。但是，如果用户从步骤2返回步骤1，则datepicker停止工作。将光标放在输入字段中时没有任何反应。如果我查看源代码，脚本仍然存在，所以我想知道它为什么找不到我的datetimepicker2。

所以场景是开始注册 - ＆gt;第1步（datepicker工作） - ＆gt;步骤2 - ＆gt;返回步骤1（datepicker不起作用）。

_Layout.cshtml

@RenderSection("scripts", required: false)

Register.cshtml

<div id="divContainer">
    @Html.Partial("_StepOne")  <!-- Step one is shown as default-->
</div>

@section scripts {         <!-- This is the script that only works the first time -->
    <script type="text/javascript">
        $(document).ready($(function () {
            $('#datetimepicker2').datetimepicker({
                locale: 'da',
                format: 'DD-MM-YYYY'
            });
        }));

    </script>
}

第1步

@model MyWebsite.Models.StepOne
@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

@using (Ajax.BeginForm("StepOne", "Wizard", options))
{    
        <input name="DateOfBirth" placeholder="dd-mm-yyyy" type='text' class="form-control" id='datetimepicker2' />
        <button type="submit" name="nextBtn" class="btn btn-primary">Next </button>
}

第2步

@model MyWebsite.Models.StepTwo
@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

@using (Ajax.BeginForm("StepTwo", "Wizard", options))
{

        <button type="submit" name="prevBtn" class="btn btn-primary">Back </button>
        <button type="submit" name="nextBtn" class="btn btn-primary">Next </button>
}

控制器只是简单地返回局部视图

WizardController.cs

[HttpPost]
public ActionResult StepOne(StepOne data, string prevBtn, string nextBtn)
{
    if (nextBtn != null)
    {
        if (ModelState.IsValid)
        {
            // Do stuff with data

            return PartialView("_StepTwo");
        }
    }
    return PartialView();
}

[HttpPost]
public ActionResult StepTwo(StepTwo data, string prevBtn, string nextBtn)
{
    CompleteRegistration obj = GetCompleteRegistration();
    if (prevBtn != null)
    {
        StepOne model = new StepOne();
        // Do stuff with data

        return PartialView("_StepOne", model);
    }
    if (nextBtn != null)
    {
        if (ModelState.IsValid)
        {
            // Do stuff with data
            return PartialView("_StepThree");
        }
    }
    return PartialView();
}

Answer 1

所以我在哈利发出线索后找到答案。我将JavaScript更改为：

    $(document).on('focusin', '#datetimepicker2', function () {
        $(this).datetimepicker({
            locale: 'da',
            format: 'DD-MM-YYYY'
        });
    });

现在它有效：）

MVC部分视图中的Javascript在替换View时停止工作

1 个答案: