MVC4使用ActionLink和TempData将数据从Controller中的文本框发送到View

时间:2013-03-12 02:23:24

标签: asp.net-mvc-4 actionlink tempdata

是否可以通过ActionLink将TempData用于将数据从View传递到Controller。我有一个具有客户端验证的View,我需要从页面上的文本框更新下拉列表,而不使用提交按钮。当使用两个提交类型按钮时,客户端验证会标记所有尚未填写的字段。实际上,我希望能够将用户定义的类别添加到下拉列表中,而不必仅跳转到文本框的不同视图并提交按钮。

我不确定我是否可以这样做:

<input type="text" name="NewCat" value="@TempData["newCat"]" placeholder="New Catagory"/>

虽然我无法让它工作......

视图:

@model Exercise4.Models.Quote

@{
    ViewBag.Title = "Create";
}

<h2>Create New Quote</h2>

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

<fieldset>
    <legend>Quotation Creation</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.CatagoryID, "Catagory")
    </div>
    <div class="editor-field">
        @Html.DropDownList("CatagoryID", String.Empty)
        @Html.ValidationMessageFor(model => model.CatagoryID)
    </div>

    <aside>
        @using (Html.BeginForm("NewCatagory","Quote"))
        {
            <input type="text" name="NewCat" value="@TempData["newCat"]" placeholder="New Catagory"/>
            @Html.ActionLink("Add Catagory","NewCatagory","Quote")

        }
    </aside>

    <div class="editor-label">
        @Html.LabelFor(model => model.QName)
    </div>
    <div class="editor-field">

        @Html.TextBoxFor(model => model.QName)
        @Html.ValidationMessageFor(model => model.QName)

    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.QAuthor)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.QAuthor)
        @Html.ValidationMessageFor(model => model.QAuthor)
    </div>
    <p>
        <input type="submit" value="Create" />

    </p>
</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

控制器部分:

//
// Create New Catagory
public ActionResult NewCatagory()
{
    string value = TempData["newCat"] as string;
    if(!String.IsNullOrWhiteSpace(value))
    {
        Catagory cat = new Catagory();
        cat.CatName = value;
        db.Catagories.Add(cat);
        db.SaveChanges();
    }

    ViewBag.CatagoryID = new SelectList(db.Catagories, "CatagoryID", "CatName");
    return RedirectToAction("Create");
}

任何建议都会非常感激如何使这项工作或更优雅的东西。

2 个答案:

答案 0 :(得分:1)

如果要更新客户端数据,请使用jQuery - 尤其是如果您不需要返回服务器来获取数据。使用元素的click事件来处理和操作数据客户端。像

这样的东西
$("#addmore").on('click', function() {
    $("#someSelect").append('<option value="someoption">Some Option</option>');
});

答案 1 :(得分:1)

这是我的修复。

我渲染了局部视图

主视图

<div class="asideRight">
    <fieldset>
        <legend></legend>
        @Html.Partial("_AddCat", new Exercise4.Models.Category())
    </fieldset>
</div>

部分视图

@model Exercise4.Models.Category

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm("addCat", "Quote")) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend class="myLegend">Create New Category</legend>

        <div class="editor-field">
            @Html.EditorFor(model => model.CatName)
        </div>

        <p>
            <input class="mySubmit" type="submit" value="Create" />
        </p>
    </fieldset>
    <div class="myValidation">
        @Html.ValidationMessageFor(model => model.CatName)
        @Html.ValidationMessage("")
    </div>
}

这允许我回发到控制器并添加新类别,然后返回到创建视图

控制器方法

    [HttpPost]
    [Authorize]
    public ActionResult addCat(Category cat)
    {
        if (cat.CatName != null)
        {
            bool exists = db.Categories.Any(n => n.CatName.ToLower() == cat.CatName.ToLower());
            if (!exists)
            {
                db.Categories.Add(cat);
                db.SaveChanges();
            }
            else
            {
                ModelState.AddModelError("", "You entered a duplicate Category Name");
            }
        }

        ViewBag.CategoryID = new SelectList(db.Categories.OrderBy(n => n.CatName), "CategoryID", "CatName");
        return RedirectToAction("Create");
    }