2016-08-01 53 views
0

我有从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> 

或 “显示2”:

<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> 

的过程是这样的:
1.我搜索“诊所”
2.我从打成账户取回结果诊所
3.我点击一个账户
4.我编辑账户信息。
5.我保存所有更改
6.我再次单击帐户后,“显示”和“显示2”显示更新
7.搜索列表从不显示更新。

我知道这是一个有点太多的代码,包括在一个问题中,它可能看起来像我还没有试图找出解决方案......但我真的不知道如何做到这一点。如果任何人都可以提供几行代码来说明如何做到这一点,那真的会有所帮助。

回答

0

保存表单(发布到/ 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})'); 
}); 

和Controller:

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

你需要相应的HTML在“_Account”局部视图中。