Question

我有一个包含来自db的数据的表单：

<div class="overview" style="border-bottom: 1px solid gainsboro;">
    <h2 class="title">CONTACT INFORMATION</h2>
    <div class="left" >

        <div class="input-group" id="Display">
            <span class="store-name" id="lblAccountName">@Model.Pharmacy.AccountName</span>
            <span class="store-address" id="lblAddressBlock">@Model.Pharmacy.Address, <br /> @Model.Pharmacy.City, @Model.Pharmacy.State @Model.Pharmacy.ZipCode</span>
        </div>
        @using (Html.BeginForm("SaveAccount", "RxCard", FormMethod.Post, new { id="Save", enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            <fieldset>
                <div id="Edit">
                    <input id="chkIsActive" style="margin: 5px; " type="hidden" name="chkIsActive"  value="@Model.Pharmacy.IsActive" @(Model.Pharmacy.IsActive == "True" ? "checked=\"checked\"" : "") />
                    <input style="margin: 5px; " type="hidden" name="AccountID" id="AccountID" value="@Model.Pharmacy.AccountID" />
                    <label id="lblAccountName">Account Name</label>
                    @Html.ValidationMessageFor(model => model.Pharmacy.AccountName)
                    @Html.TextBoxFor(model => model.Pharmacy.AccountName, new { @id = "txtAccountName" })
                    <label id="lblAddress">Address</label>
                    @Html.ValidationMessageFor(model => model.Pharmacy.Address)
                    @Html.TextBoxFor(model => model.Pharmacy.Address, new { @id = "txtAddress", @Name = "txtAddress" })
                    <label id="lblCity">City</label>
                    @Html.ValidationMessageFor(model => model.Pharmacy.City)
                    @Html.TextBoxFor(model => model.Pharmacy.City, new { @id = "txtCity", @Name = "txtCity" })
                    <label id="lblState">State</label>
                    @Html.ValidationMessageFor(model => model.Pharmacy.State)
                    @Html.TextBoxFor(model => model.Pharmacy.State, new { @id = "txtState", @Name = "txtState" })
                    <label id="lblZip">Zip</label>
                    @Html.ValidationMessageFor(model => model.Pharmacy.ZipCode)
                    @Html.TextBoxFor(model => model.Pharmacy.ZipCode, new { @id = "txtZip", @Name = "txtZip" })
                    <label id="lblPhoneNumber">Phone Number</label>
                    @Html.TextBoxFor(model => model.Pharmacy.Area, new { @id = "txtArea", @onkeyup = "tabout(this,'txtPrefix');", @maxlength = "3", @style = "float:left; width:4em" })
                    @Html.TextBoxFor(model => model.Pharmacy.Prefix, new { @id = "txtPrefix", @onkeyup = "tabout(this,'txtSuffix');", @maxlength = "3", @style = "float:left; width:4em" })
                    @Html.TextBoxFor(model => model.Pharmacy.Suffix, new { @id = "txtSuffix", @onkeyup = "tabout(this,'txtSuffix');", @maxlength = "4", @style = "float:left; width:4em" })     
                </div>
            </fieldset>
            <br />
            <button type="submit" name="EditAccount" id="EditAccount" value="Edit">Edit</button>
            <button type="button" name="SaveAccount" id="SaveAccount" value="@Model.Pharmacy.AccountID">Save</button>
            <button type="reset" name="Cancel" id="Cancel">Cancel</button>
            <button type="button" name="RemoveAccount" id="RemoveAccount" value="@Model.Pharmacy.AccountID">Remove</button>
        }
    </div>
    <div class="right" id="Display2">
        <a href="tel:@Model.Pharmacy.PhoneNumber" class="phone"><img src="~/images/icon-phone.png" height="25" width="25">@Model.Pharmacy.PhoneNumber</a>
    </div>
    <div class="float-clear"></div>
</div>

和jquery帖子：

 $("#SaveAccount").click(function (e) {

    //e.preventDefault();
    $('#Edit').hide();
    $('#Display').show();
    $('#Display2').show();
    $('#Cancel').hide();
    $('#RemoveAccount').show();
    $('#SaveAccount').hide();
    $('#EditAccount').show();

    $("body").css("cursor", "wait");

    $.post("/RxCard/SaveAccount",
    {
        IsActive: true,
        AccountId: $("#AccountID").val(),
        AccountName: $("#txtAccountName").val(),
        Address: $("#txtAddress").val(),
        City: $("#txtCity").val(),
        State: $("#txtState").val(),
        ZipCode: $("#txtZip").val(),
        Area: $("#txtArea").val(),
        Prefix: $("#txtPrefix").val(),
        Suffix: $("#txtSuffix").val()

    }).done(function (output) {
        if (output.length > 0)
            alert(output)
    }).always(function () {
        $("body").css("cursor", "default").delay(1000);
        // loadAccount(accountId);
    });      
});

将对表单所做的任何更改传递回“SaveAccount”控制器：

[ValidateRequest]
[HttpPost]
public string SaveAccount(FormCollection form)
{
    Pharmacy pharmacy = new Pharmacy();
    var isactive = Convert.ToBoolean(form["IsActive"])?1:0;
    int AccountID = Convert.ToInt32(form["AccountId"]);
    var AccountName = form["AccountName"];
    var Address = form["Address"];
    var City = form["City"];
    var State = form["State"];
    var ZipCode = form["ZipCode"];
    var PhoneNumber = "(" + form["Area"] + ") " + form["Prefix"] + "-" + form["Suffix"];

    using (OdbcConnection _conn = new OdbcConnection("FILEDSN=c:\\datasources\\RxCard.dsn"))
    using (OdbcCommand cmd1 = new OdbcCommand())
    {
        cmd1.Connection = _conn;
        cmd1.CommandText = "{call web.Maint_UpdateClinic(?,?,?,?,?,?,?,?,?)}";
        cmd1.Parameters.AddWithValue("@AccountID", AccountID);
        cmd1.Parameters.AddWithValue("@IsActive", isactive);
        cmd1.Parameters.AddWithValue("@AccountName", AccountName);
        cmd1.Parameters.AddWithValue("@Address", Address);
        cmd1.Parameters.AddWithValue("@City", City);
        cmd1.Parameters.AddWithValue("@State", State);
        cmd1.Parameters.AddWithValue("@ZipCode", ZipCode);
        cmd1.Parameters.AddWithValue("@PhoneNumber", PhoneNumber);
        cmd1.Parameters.AddWithValue("@WebID", CookieStore.GetCookie("WebId"));

        cmd1.CommandType = CommandType.StoredProcedure;
        _conn.Open();
        cmd1.ExecuteNonQuery();
        _conn.Close();
    }
    //Response.Redirect("~/rxcard/search");
    return string.Empty;
}

保存操作可以正常工作，但所做的任何更改都不会反映出来在“显示”中：

<div class="input-group" id="Display">
  <span class="store-name" id="lblAccountName">@Model.Pharmacy.AccountName</span>
  <span class="store-address" id="lblAddressBlock">@Model.Pharmacy.Address, <br /> @Model.Pharmacy.City, @Model.Pharmacy.State @Model.Pharmacy.ZipCode</span>
</div>

或在“Display2”中：

<div class="right" id="Display2">
     <a href="tel:@Model.Pharmacy.PhoneNumber" class="phone"><img src="~/images/icon-phone.png" height="25" width="25">@Model.Pharmacy.PhoneNumber</a>
</div>

位于表格本身的上方和下方。

或者在部分视图中列出搜索产生的帐户：

@model RxCard.Models.AccountsPage
@{
    ViewBag.Title = "RxCard";
}

<div class="page">
    <div>
        @Html.Partial("_Nav") 
    </div>

    <section class="main-content acct-list">
        <section class="left-col onview">
            <div class="search-box-wrapper">
                <form action="/rxcard/accounts" method="post">
                    @Html.TextBox("keywords", null, new { @class = "searchBox search-input", @placeholder = "Search..." })
                    <button type="submit" class="btn-primary btn-search text-center">SEARCH</button>
                </form>
            </div>

            <div class="search-box-result-count shadowed">@Model.Results.Count Results Found</div>

            <div class="acct-list-results">
                <ul>
                    @foreach (var item in Model.Results.Pharmacies)
                    {
                        <li class="result">
                            <a class="item" id="@("item" + @item.AccountID)" href="@item.AccountID">
                                <span class="acct-name" style="text-transform:uppercase;">@item.AccountName</span>
                                <span class="acct-address" style="text-transform:uppercase;">@item.Address</span>
                                <span class="acct-address" style="text-transform:uppercase;"> @item.City, @item.State @item.ZipCode</span>
                                <span class="acct-phone">@item.PhoneNumber</span>
                            </a>
                        </li>
                    }
                </ul>
            </div>
        </section>
        <div class="col-md-8">
            <section class="right-col">
                <div id="accountDetails" class="acct-details">
                    @Html.Partial("_SearchResult")
                </div>
            </section>
        </div>
   <</section> 
 </div>

程序如下：
我在搜索“诊所” 我从标有诊所的账户中找回结果 3.我点击一个帐户
4.我编辑了帐户信息 5.我保存任何更改 6.“display”和“display2”在我再次点击该帐户后显示更新 7.搜索列表从不显示更新
我知道这有点太多的代码要包含在一个问题中，看起来我似乎没有尝试找出解决方案......但我真的不知道如何做到这一点。如果有人能提供几行代码来说明如何做到这一点真的会有所帮助。

Answer 1

保存表单（发布到/ RxCard / SaveAccount）后，如果您不想刷新整个页面，则必须手动刷新HTML进行AJAX调用。对于此调用，在控制器中，您只想返回要刷新的部分的相应HTML，从而返回部分视图。

这很好地解释了它：https://stackoverflow.com/a/18256629/722778

例如，要更新“显示”：

$.post("/RxCard/SaveAccount",
    {
        IsActive: true,
        AccountId: $("#AccountID").val(),
        AccountName: $("#txtAccountName").val(),
        Address: $("#txtAddress").val(),
        City: $("#txtCity").val(),
        State: $("#txtState").val(),
        ZipCode: $("#txtZip").val(),
        Area: $("#txtArea").val(),
        Prefix: $("#txtPrefix").val(),
        Suffix: $("#txtSuffix").val()
}).done(function (output) {
    if (output.length > 0)
        alert(output)
}).always(function () {
    $("body").css("cursor", "default").delay(1000);
    $('#Display').Load('@Html.Action("GetAccount", new {id = Model.ID})');
});

在控制器中：

public ActionResult GetAccount(int id)
{    
    // load account from db
    return PartialView("_Account", model);
}

您需要在“_Account”部分视图中使用相应的HTML。

提交后在部分视图中更新数据

1 个答案: