MVC5 Ajax.BeginForm, UpdateTargetId no render PartialView

Question!

I have a problem with my MVC application.

My controller:

  public class CustomerController : Controller
{
    CustomerFacade cf = new CustomerFacade();

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public void Create(Customers customers)
    {
        if (customers != null)
        {
            cf.CreateCustomer(customers, UserSession.UserId);
        }

        // return View();
    }


    public ActionResult GetAllCustomers()
    {
        var allCustomers = cf.GetAllCustomers();
        return PartialView("InsuranceCustomer", allCustomers);
    }
}

My main view:

 <div class="x_content">

        <div id="mainb" style="height:350px;">

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
                <i class="fa fa-plus"></i>
            </button>
            @*render modal*@
            @Html.Partial("~/Views/Customer/CreateModal.cshtml")

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
                <i class="fa fa-database"></i>
            </button>
            @*render modal*@

            <div id="customerId">
                @Html.Action("GetAllCustomers", "Customer")
            </div>

        </div>
    </div>

The partial view CreateModal.cshtml is a form on bootstrap modalpopup:

for example:

    <div class="modal-body">
            @using (Ajax.BeginForm("Create", "Customer", null, new AjaxOptions
            {
                HttpMethod = "Post",
                UpdateTargetId = "customerId",
                OnSuccess = "$('#customerModal').modal('hide')"
            }))
            {
                @Html.AntiForgeryToken()
                <div class="form-horizontal">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <div class="col-md-4">
                            @Html.TextBoxFor(model => model.FirstName, new { @required = "require", @class = "form-control", placeholder = @Resources.InsuranceCustomer.FirstName })
                            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                        </div>
                        <div class="col-md-4">
                            @Html.TextBoxFor(model => model.LastName, new { @required = "require", @class = "form-control", placeholder = @Resources.InsuranceCustomer.LastName })
                            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    // and other field form

                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" value="@Resources.Common.Save" class="btn btn-success" />
                </div>
            }
            @*<div>
                    @Html.ActionLink("Back to List", "Index")
                </div>*@
        </div>

and InsuranceCustomer looks like:

@model IEnumerable<Insurance_System.Models.Customers>

  <p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>

    <th>
        @Html.DisplayNameFor(model => model.FirstName)
    </th>  
</tr>
@foreach (var item in Model) {
<tr>    
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
</tr>}   

I want to after submiting modal CreateModal loaded again InsuranceCustomer with new element without reloading page.

(sorry for my bad English)



Answers

in the controller

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public void Create(Customers customers)
    {
        var cust = new customer
        {
         name=customers.name,
         etc....
        }
        db.customers.add(cust);
        db.savechanges();
        var listcustomers  = db.customers.ToList();
        return PartialView("InsuranceCustomer",listcustomers);
    }

in the View

<div class="x_content">

        <div id="mainb" style="height:350px;">
           <div id="customerId">
                      @*here will be load your partialview*@
            </div>
        </div>
    </div>
<div class="modal-body">
        @using (Ajax.BeginForm("Create", "Customer", null, new AjaxOptions
        {
            HttpMethod = "Post",
            UpdateTargetId = "customerId",
            OnSuccess = "$('#customerModal').modal('hide')"
        }))
        {
            @Html.AntiForgeryToken()
            <div class="form-horizontal">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    <div class="col-md-4">
                        @Html.TextBoxFor(model => model.FirstName, new { @required = "require", @class = "form-control", placeholder = @Resources.InsuranceCustomer.FirstName })
                        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                    </div>
                    <div class="col-md-4">
                        @Html.TextBoxFor(model => model.LastName, new { @required = "require", @class = "form-control", placeholder = @Resources.InsuranceCustomer.LastName })
                        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                    </div>
                </div>

                // and other field form

            <div class="modal-footer">
                <button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" value="@Resources.Common.Save" class="btn btn-success" />
            </div>
        }
        @*<div>
                @Html.ActionLink("Back to List", "Index")
            </div>*@
    </div>

in the partial view

@model IEnumerable<Insurance_System.Models.Customers>

  <p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>

    <th>
        @Html.DisplayNameFor(model => model.FirstName)
    </th>  
</tr>
@foreach (var item in Model) {
<tr>    
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
</tr>} 

By : Antonio




string sql = "SELECT studnum,course,f_name,l_name,color_image FROM table3 WHERE [email protected]";
command = new SqlCommand(sql, conn);
command.Parameters.Add(new SqlParameter("@Name", textBoxfname.Text));


This video can help you solving your question :)
By: admin