Question

这是我的剃刀观点。重点是当我下拉值更改时，更新question-editor div。如您所见，我正在调用EditorFor。

@model Contoso.MvcApplication.Models.Question.CreateQuestionViewModel

@{
    ViewBag.Title = "Create Open Question";
}

<h3>Create Question</h3>

<select id="question-type-dropdown" style="margin-bottom: 20px;">
    <option value="MC">Multiple Choice</option>
    <option value="O">Open Question</option>
</select>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        @Html.HiddenFor(model => model.QuestionSetId)
        <legend>Question Template</legend>

        <div id="question-editor">
            @Html.EditorFor(model => model.Template, "_QuestionEditorBoxPartial")
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

这是局部视图，只包含一个EditorModelFor来选择它应该使用哪个viewtemplate。

_QuestionEditorBox（PartialView）

@model Contoso.Core.Base.QuestionTemplate
@Html.EditorForModel(Contoso.Core.QuestionRepositoryManager.GetQuestionTemplateView(Model))
public abstract class Question
{
   public int Id {get;set;}
   public string QuestionText { get; set; }
}

public OpenQuestion : Question { ... }
public MultipleChoiceQuestion : Question { ... }

public class CreateQuestionViewModel
{
    public int QuestionSetId { get; set; }
    public QuestionTemplate Template { get; set; }
}

但是当我这样做时，它没有显示任何东西，因为我正在使用相同的模型进行两次编辑。我尝试用PartialView更改第一个EditorFor，但这不会起作用，因为我需要模型绑定器捕获我的模型。

编辑（AJAX方法）：

$("#question-type-dropdown").change(function () {
    $.get("/Question/UpdateQuestionEditorBox", { questionType: $(this).val() },
        function (data) {
            $("#question-editor").html(data);
        });
});

Answer 1

一种可能性是使用部分（不是编辑器模板）：

<div id="question-editor">
    @Html.Partial("_QuestionEditorBox.cshtml", Model.Template)
</div>

然后在你的部分内部：

@model Contoso.Core.Base.QuestionTemplate
@{
    ViewData.TemplateInfo.HtmlFieldPrefix = "Template";
}
@Html.EditorForModel(Contoso.Core.QuestionRepositoryManager.GetQuestionTemplateView(Model))

注意我是如何设置HtmlFieldPrefix以便将导航上下文保存到partial中的，因此在相应的编辑器模板中为输入字段生成适当的名称。

此外，您提到当下拉选项更改但您没有显示任何AJAX代码时，使用AJAX调用更新question-editor div。我猜你已经订阅了某个地方的下拉列表的.change事件并触发了一个AJAX调用。

如何使用Ajax更新此div？

1 个答案: