Question

我知道还有其他帖子，但我仍然没有把头包裹起来。

我想编写我的MVC视图以使用ViewModel，它允许文本字段根据下拉列表中的选择进行更改？

在下面的示例中，我有一组模板。我想在下拉列表中看到模板，然后用户将从DropDownList中选择一个项目，代码将填充文本字段，用户可以编辑这些文本字段，最后提交表单及其更改。

现在发生的是，每次调用提交代码时，都会像选择下拉列表一样。

模型和ViewModel：

public class Template
{
    [Display(Name = "Template")]
    public int TemplateId {get; set;}
    public string TemplateName {get; set;}
    public string Subject {get; set;}
    public string Message {get; set;}
}

public class TemplateViewModel
{
    [Display(Name = "Template")]
    public int LetterTemplateId {get; set;}
    public ICollection<Template> Templates { get; set; }
}

查看：

@model MyWebProject.ViewModels.TemplateViewModel
@using (Html.BeginForm("callforcontentproposaldetail","Project", FormMethod.Post, new {id = "frmProposalDetail"}))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Email Template</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.LetterTemplateId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.DropDownListFor(m => m.LetterTemplateId,
                    new SelectList(Model.Templates as IEnumerable, "TemplateId", "TemplateName"),
                    new { @class = "form-control", onchange = "document.getElementById('frmProposalDetail').submit();", id = "ddlTemplate" })
                @Html.ValidationMessageFor(model => model.LetterTemplateId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div id="letterTemplateEditArea">
            <div class="form-group col-md-12">
                <div class="row">
                    @Html.TextBoxFor(model => model.SelectedTemplate.TemplateSubject, new { @class = "form-control" })
                    @Html.LabelFor(model => model.SelectedTemplate.Message, new { @class = "control-label" })
                    @Html.TextAreaFor(model => model.SelectedTemplate.Message, new { @class = "form-control", @style = "max-width:100%;height:400px;font-size:11px;" })
                </div>
            </div>
            <br />
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

控制器代码：

public ActionResult callforcontentproposaldetail(Guid id)
{
    var proposal = db.CallForContentProposal.Find(id);

    var model = Mapper.Map<CallForContentProposalViewModel>(proposal);

    if (TempData["LetterTemplateId"] != null)
    {
        var emailTempId = 0;
        if (int.TryParse((string)TempData["LetterTemplateId"], out emailTempId))
        {
            var template = model.Templates.FirstOrDefault(t => t.TemplateId == emailTempId);
            model.SelectedTemplateId = emailTempId;
            model.Subject = template.Subject;
            model.Message = template.Body;
        }
    }

    return View(model);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult callforcontentproposaldetail(CallForContentProposalViewModel model, string SelectedTemplateId = "")
{
    // Do some saving of the current data
    // ...
    db.SaveChanges();

    // If this is the dropdownlist calling, redirect back to display the text fields populated
    if (!string.IsNullOrEmpty(SelectedTemplateId))
    {
        TempData["LetterTemplateId"] = SelectedTemplateId;
        return RedirectToAction("callforcontentproposaldetail", new { id = model.CallForContentProposalId });
    }

    // On Submit, do other tasks

    return RedirectToAction("callforcontent", new {id =  model.CallForContentId});
}

Answer 1

我明白了。感谢您的评论，我找到了一种方法来使用Ajax为我们的情况做这件事（我试图尽可能通用，以便在其他地方重用）：

查看：

EDT

使用Javascript：

EST

控制器：

UTCTime

我也遵循了这个例子，虽然它不完整： CodeProject example

MVC下拉列表更新表单不起作用

1 个答案: