locked
Popup All Fields are Disappeared RRS feed

  • Question

  • User1912965948 posted

    Hi all,

    I hope you guys must be fine this evening.

    i'm using a same form for inserting and updating when i click the add new button the popup form appears

    as it should with all its fields but when i click update button the form popups without any field totally empty form blank page.

    I have no idea whats going wrong.

    I share the code.

    cshtml (Popup form)

    @model Project.Models.CustomerModel
    @{
        Layout = null;
    }
    
    <h3>Add Customer</h3>
    
    
    @using (Html.BeginForm("AddEdit", "Customer", FormMethod.Post, new { onsubmit = "return SubmitForm(this)"}))
    {
    
        @Html.HiddenFor(model => model.Id)
    
        <div class="form-control">
            @Html.LabelFor(model => model.name, new { @class = "control-label" })
            @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" }})
            @Html.ValidationMessageFor(model => model.name)
        </div>
    
        <div class="form-control">
            @Html.LabelFor(model => model.contact, new { @class = "control-label" })
            @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.contact)
        </div>
    
        <div class="form-control">
            @Html.LabelFor(model => model.email, new { @class = "control-label" })
            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.email)
        </div>
    
        
        <div class="form-control">
            <input type="submit" value="Submit" class="btn" />
            <input type="reset" value="Reset" class="btn" />
        </div>
    }
    

    Add New Button

    <a class="btn btn-default onclick="PopupForm('@Url.Action("AddEdit", "Customer")')"> Add New Customer</a>

    Update Button (using jQuery Datatable)

    {
                            searchable: false,
                            orderable: false,
                            data: null,
                            render: function (data) {
                                return "<a class='btn btn-default' title='Edit' onclick=PopupForm('@Url.Action("AddEdit", "Customer")/" + data.Id + "')> Edit</a> ";
                            }
                        }

    JavaScript

    function PopupForm(url) {
                var formDiv = jQuery('<div/>');
                jQuery.get(url)
                    .done(function (response) {
                        formDiv.html(response);
                        popUp = formDiv.dialog({
                            autoOpen: true,
                            resizable: false,
                            title: 'Add New Customer',
                            height: 500,
                            width: 700,
                            modal: true,
                            close: function () {
                                popUp.dialog('destroy').remove();
                            }
                        });
                    });
            }
    
            function SubmitForm(form) {
                jQuery.validator.unobtrusive.parse(form);
                if (jQuery(form).valid()) {
                
                    jQuery.ajax({
                        type: 'POST',
                        url: form.action,
                        data: jQuery(form).serialize(),
                        success: function (data) {
                            if (data.success) {
                                popUp.dialog('close');
                                dataTable.ajax.reload();
    
                                jQuery.notify(data.message, {
                                    globalPosition: 'top center',
                                    className: 'success'
                                });
                            }
                        }
                    });
                }
                return false;
            }

    Controller

    [HttpGet]
            public ActionResult AddEdit(int Id = 0) {
                if (Id == 0)
                {
                    return View(new CustomerModel());
                }
                else {
                    DataSet ds = dbLayer.Get_CustomerProfileById(Id);
                    CustomerModel customerModel = new CustomerModel();
                    customerModel.Id = Convert.ToInt32(ds.Tables[0].Rows[0]["Id"].ToString());
                    customerModel.name = ds.Tables[0].Rows[0]["CusName"].ToString();
                    customerModel.contact = ds.Tables[0].Rows[0]["PhoneNo"].ToString();
                    customerModel.email = ds.Tables[0].Rows[0]["FaxNo"].ToString();
                    return Json(new { data = customerModel }, JsonRequestBehavior.AllowGet);
                }
                    
            }
    
            [HttpPost]
            public ActionResult AddEdit(CustomerModel customerModel, FormCollection formCollection) {
                if (customerModel.Id == 0)
                {
                    customerModel.name = formCollection["name"];
                    customerModel.contact= formCollection["contact"];
                    customerModel.email= formCollection["email"];
                    dbLayer.Add_NewCustomerProfile(customerModel);
                    return Json(new { success = true, message = "Customer Profile Saved Successfuly !!!" }, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    customerModel.Id = Convert.ToInt32(formCollection["Id"].ToString());
                    customerModel.name = formCollection["name"];
                    customerModel.contact= formCollection["contact"];
                    customerModel.email= formCollection["email"];
                    dbLayer.Update_CustomerProfile(customerModel);
                    return Json(new { success = true, message = "Customer Profile updated Successfuly !!!" }, JsonRequestBehavior.AllowGet);
                }
                
            }

    I want that when i click update button form popup with all fields with all data

    I'll appreciate it.

    Thx in advance.

    Wednesday, December 18, 2019 9:42 PM

Answers

  • User665608656 posted

    Hi fungus.00,

    According to the code you shared, the reason why all the content in the pop-up box disappears when you click edit is in the AddEdit method of your Get request.

    When you edit, you still need to return the current edited customerModel of the data, not json format.

    And when you click the submit button, you don't need to use js method of SubmitForm for verification. The entity framework has its own verification.

    You only need to return RedirectToAction ("Index") in the AddEdit method of the post request.

    For more details, you can refer to the following code:

    controller:

      [HttpGet]
            public ActionResult AddEdit(int Id = 0)
            {
                if (Id == 0)
                {
                    return View(new CustomerModel());
                }
                else
                {
                    DataSet ds = dbLayer.Get_CustomerProfileById(Id);
    CustomerModel customerModel = new CustomerModel();
    customerModel.Id = Convert.ToInt32(ds.Tables[0].Rows[0]["Id"].ToString());
    customerModel.name = ds.Tables[0].Rows[0]["CusName"].ToString();
    customerModel.contact = ds.Tables[0].Rows[0]["PhoneNo"].ToString();
    customerModel.email = ds.Tables[0].Rows[0]["FaxNo"].ToString(); return View(customerModel); } } [HttpPost] public ActionResult AddEdit(CustomerModel customerModel, FormCollection formCollection) { if (customerModel.Id == 0) { customerModel.name = formCollection["name"];
    customerModel.contact= formCollection["contact"];
    customerModel.email= formCollection["email"];
    dbLayer.Add_NewCustomerProfile(customerModel); return RedirectToAction("Index");
    // return Json(new { success = true, message = "Customer Profile Saved Successfuly !!!" }, JsonRequestBehavior.AllowGet); } else { customerModel.Id = Convert.ToInt32(formCollection["Id"].ToString());
    customerModel.name = formCollection["name"];
    customerModel.contact= formCollection["contact"];
    customerModel.email= formCollection["email"];
    dbLayer.Update_CustomerProfile(customerModel); return RedirectToAction("Index"); //return Json(new { success = true, message = "Customer Profile updated Successfuly !!!" }, JsonRequestBehavior.AllowGet); } }

    AddEdit cshtml:

    @model Project.Models.CustomerModel
    @{
        Layout = null;
    }
    
    <h3>Add Customer</h3>
    
    
    @using (Html.BeginForm("AddEdit", "Customer", FormMethod.Post)
    {
    
        @Html.HiddenFor(model => model.Id)
    
        <div class="form-control">
            @Html.LabelFor(model => model.name, new { @class = "control-label" })
            @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" }})
            @Html.ValidationMessageFor(model => model.name)
        </div>
    
        <div class="form-control">
            @Html.LabelFor(model => model.contact, new { @class = "control-label" })
            @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.contact)
        </div>
    
        <div class="form-control">
            @Html.LabelFor(model => model.email, new { @class = "control-label" })
            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.email)
        </div>
    
        
        <div class="form-control">
            <input type="submit" value="Submit" class="btn" />
            <input type="reset" value="Reset" class="btn" />
        </div>
    }

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 19, 2019 8:25 AM

All replies

  • User665608656 posted

    Hi fungus.00,

    According to the code you shared, the reason why all the content in the pop-up box disappears when you click edit is in the AddEdit method of your Get request.

    When you edit, you still need to return the current edited customerModel of the data, not json format.

    And when you click the submit button, you don't need to use js method of SubmitForm for verification. The entity framework has its own verification.

    You only need to return RedirectToAction ("Index") in the AddEdit method of the post request.

    For more details, you can refer to the following code:

    controller:

      [HttpGet]
            public ActionResult AddEdit(int Id = 0)
            {
                if (Id == 0)
                {
                    return View(new CustomerModel());
                }
                else
                {
                    DataSet ds = dbLayer.Get_CustomerProfileById(Id);
    CustomerModel customerModel = new CustomerModel();
    customerModel.Id = Convert.ToInt32(ds.Tables[0].Rows[0]["Id"].ToString());
    customerModel.name = ds.Tables[0].Rows[0]["CusName"].ToString();
    customerModel.contact = ds.Tables[0].Rows[0]["PhoneNo"].ToString();
    customerModel.email = ds.Tables[0].Rows[0]["FaxNo"].ToString(); return View(customerModel); } } [HttpPost] public ActionResult AddEdit(CustomerModel customerModel, FormCollection formCollection) { if (customerModel.Id == 0) { customerModel.name = formCollection["name"];
    customerModel.contact= formCollection["contact"];
    customerModel.email= formCollection["email"];
    dbLayer.Add_NewCustomerProfile(customerModel); return RedirectToAction("Index");
    // return Json(new { success = true, message = "Customer Profile Saved Successfuly !!!" }, JsonRequestBehavior.AllowGet); } else { customerModel.Id = Convert.ToInt32(formCollection["Id"].ToString());
    customerModel.name = formCollection["name"];
    customerModel.contact= formCollection["contact"];
    customerModel.email= formCollection["email"];
    dbLayer.Update_CustomerProfile(customerModel); return RedirectToAction("Index"); //return Json(new { success = true, message = "Customer Profile updated Successfuly !!!" }, JsonRequestBehavior.AllowGet); } }

    AddEdit cshtml:

    @model Project.Models.CustomerModel
    @{
        Layout = null;
    }
    
    <h3>Add Customer</h3>
    
    
    @using (Html.BeginForm("AddEdit", "Customer", FormMethod.Post)
    {
    
        @Html.HiddenFor(model => model.Id)
    
        <div class="form-control">
            @Html.LabelFor(model => model.name, new { @class = "control-label" })
            @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" }})
            @Html.ValidationMessageFor(model => model.name)
        </div>
    
        <div class="form-control">
            @Html.LabelFor(model => model.contact, new { @class = "control-label" })
            @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.contact)
        </div>
    
        <div class="form-control">
            @Html.LabelFor(model => model.email, new { @class = "control-label" })
            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.email)
        </div>
    
        
        <div class="form-control">
            <input type="submit" value="Submit" class="btn" />
            <input type="reset" value="Reset" class="btn" />
        </div>
    }

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 19, 2019 8:25 AM
  • User1912965948 posted

    Thank you brother

    Friday, December 20, 2019 6:26 AM