How to Avoid PostBack in Asp.net MVC4

Question

I have a form in that in will bind Some values on two differnt dropdown,and i save the users selected value.Now i use RequiredIf attributes.Its also works fine.If user missed to select value it shows messages, as the same way some selected values in dropdown will comes to default after submit button was clicked.I need to show meesages without any change in users selection because of Action Results Loads Again.

My Code for Model is;

> public ObservableCollection<Receipt> GetReceiptList()
>         {
>             ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
>             DataTable dtReceipt = new DataTable();
>             dtReceipt = objDAL.ExecuteTable(CommandType.StoredProcedure, "sp_Receipt_Select");
>             foreach (DataRow dr in dtReceipt.Rows)
>             {
>                 ReceiptList.Add(new Receipt
>                 {
>                     Id = Convert.ToInt32(dr["REC_Id_I"]),
>                     Cust_Name = dr["CUS_Name_V"].ToString(),
>                     Pay_Amount = dr["REC_PaidAmount_M"].ToString(),
>                     Pay_Mode = dr["REC_PayMode_C"].ToString(),
>                     Bank_Name = dr["REC_BankName_V"].ToString(),
>                     Bank_Address = dr["REC_BankAddress"].ToString(),
>                     ChequeNo = dr["REC_ChequeNo_V"].ToString(),
>                     Cheque_Date = dr["REC_ChequeDate_D"].ToString(),
>                 });
>             }
>             return ReceiptList;
>         }

Code for Control

//AtLoad
public ActionResult ReceiptMaster(Receipt model)
        {
            ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
            Receipt Receipt = new Models.Receipt();
            ReceiptList = Receipt.GetReceiptList();
            ModelState.Clear();
            Sales sales = new Models.Sales();
            DataTable dtCustomer = new DataTable();
            dtCustomer = sales.GetCustomerList();

            IList<Sales> MyCustList = new List<Sales>();
            foreach (DataRow mydataRow in dtCustomer.Rows)
            {
                MyCustList.Add(new Sales()
                {
                    Cust_Id = Convert.ToInt32(mydataRow["Id"].ToString().Trim()),
                    Cust_Name = mydataRow["Name"].ToString().Trim()
                });
            }
            var CustName = new SelectList(MyCustList, "Id", "Cust_Name");
            ViewData["Cu_Name"] = CustName;
            return View(ReceiptList);
        }



    //TO Insert
[HttpPost]
        public ActionResult ReceiptMaster(Receipt model, string command)
        {
            Receipt Receipt = new Models.Receipt();

            if (command == "Sumbit")
            {
                int Id = 0;
                if (model.Pay_Mode == "C")
                {
                    model.ChequeNo = "";
                    model.Cheque_Date = ("1/1/1753 12:00:00 AM");
                    model.Bank_Name = "";
                    model.Bank_Address = "";
                }

                if (ModelState.IsValid)
                {
                    Id = Receipt.SaveReceipt(model.Id, model.Cust_Id, model.Pay_Amount, model.Pay_Mode, model.Bank_Name, model.Bank_Address, model.ChequeNo, model.Cheque_Date);
                    if (Id > 0)
                    {
                        ViewData["Success"] = "Product was saved successfully.";
                        ViewData["ControlView"] = 1;

                        return RedirectToAction("ReceiptMaster", "Admin");

                    }
                    return RedirectToAction("ReceiptMaster", "Admin");
                }

                ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
                ReceiptList = Receipt.GetReceiptList();
                return View(ReceiptList);
            }

            ObservableCollection<Receipt> ReceiptList1 = new ObservableCollection<Receipt>();
            ReceiptList1 = Receipt.GetReceiptList();
            return View(ReceiptList1);

        }

Script Used for Bind values in DropDown

<script type="text/javascript">

    $(document).ready(function () {
        $.post('@Url.Action("SelectCustomerForDropJson", "Admin")', null, function (data) {
            var select = $("#Cust_Id");
            select.empty();
            select.append($('<option/>', { value: '', text: '--Select--' }));
            $.each(data, function (index, Data) {
                select.append($('<option/>', {
                    value: Data.Value,
                    text: Data.Text
                }));
            });
        });
    });
</script>

Answer 1

Below codes prevent %100 postback , just try.

You need to use Json in order to prevent full postback in your page. After that you must return to Partial View.

As instance;

HTML Code:

<input type="text" id="UserName" name="UserName"/>
<input type="button" onclick="ButonClick()" value="Enter"/>

Javascript Code:

function ButonClick() {
var data= {
UserName: $('#UserName').val(),
};
$.ajax({
url: "/Home/MyActionResult",
type: "POST",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(data),

Controller:

public ActionResult MyActionResult(string UserName,MyModel model)
{
var stringView = RenderRazorViewToString("_YourPartialView", model);
return Json(stringView, JsonRequestBehavior.AllowGet);
}

Note:

You need below code to render your partial view for json.

Add below to your controller too.

public string RenderRazorViewToString(string viewName, object model)
{
ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData,    TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}

Answer 2

Change return RedirectToAction("ReceiptMaster", "Admin"); to

return View(model);

in your post action

if you used the RedirectToAction ,then it's load the HTTP GET Method . So your validation message was gone .

Just copy then past my below code instead of your Post action code

and remove this line : Receipt Receipt = new Models.Receipt(); and call model instead of Receipt

//TO Insert
[HttpPost]
        public ActionResult ReceiptMaster(Receipt model, string command)
        {


            if (command == "Sumbit")
            {
                int Id = 0;
                if (model.Pay_Mode == "C")
                {
                    model.ChequeNo = "";
                    model.Cheque_Date = ("1/1/1753 12:00:00 AM");
                    model.Bank_Name = "";
                    model.Bank_Address = "";
                }

                if (ModelState.IsValid)
                {
                    Id = Receipt.SaveReceipt(model.Id, model.Cust_Id, model.Pay_Amount, model.Pay_Mode, model.Bank_Name, model.Bank_Address, model.ChequeNo, model.Cheque_Date);
                    if (Id > 0)
                    {
                        ViewData["Success"] = "Product was saved successfully.";
                        ViewData["ControlView"] = 1;
                          ObservableCollection<Receipt> ReceiptList = new              ObservableCollection<Receipt>();
            ReceiptList = Receipt.GetReceiptList();
            return View(ReceiptList);

                    }
                    ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
            ReceiptList = Receipt.GetReceiptList();
            return View(ReceiptList);
                }

                ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
                ReceiptList = Receipt.GetReceiptList();
                return View(ReceiptList);
            }

            ObservableCollection<Receipt> ReceiptList1 = new ObservableCollection<Receipt>();
            ReceiptList1 = Receipt.GetReceiptList();
            return View(ReceiptList1);

        }

Edit

Please add one model property for ReceiptList and assign the values in this property in inside of your post method and now return the model only (Now this ReceiptList values in stored in your newly ReceiptList property) ,But you are return just your gridview property to view. But the validation message and previous values are stored in your model properties, So you need to add one property for ReceiptList in your model , and read and write the grid view data in this property .

Now You will try my Below code (must see my comments ,Just imagine for model.ReceiptList is we add a new property in your model)

//TO Insert
[HttpPost]
        public ActionResult ReceiptMaster(Receipt model, string command)
        {


            if (command == "Sumbit")
            {
                int Id = 0;
                if (model.Pay_Mode == "C")
                {
                    model.ChequeNo = "";
                    model.Cheque_Date = ("1/1/1753 12:00:00 AM");
                    model.Bank_Name = "";
                    model.Bank_Address = "";
                }

                if (ModelState.IsValid)
                {
                    Id = Receipt.SaveReceipt(model.Id, model.Cust_Id, model.Pay_Amount, model.Pay_Mode, model.Bank_Name, model.Bank_Address, model.ChequeNo, model.Cheque_Date);
                    if (Id > 0)
                    {
                        ViewData["Success"] = "Product was saved successfully.";
                        ViewData["ControlView"] = 1;
                          ObservableCollection<Receipt> ReceiptList = new              ObservableCollection<Receipt>();
             model.ReceiptList = Receipt.GetReceiptList();// model.ReceiptList is your model property
            return View(model);

                    }
                    ObservableCollection<Receipt> ReceiptList = new              ObservableCollection<Receipt>();
             model.ReceiptList = Receipt.GetReceiptList();// model.ReceiptList is your model property
            return View(model);
                }

                ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
                ReceiptList = Receipt.GetReceiptList();
                return View(ReceiptList);
            }

             ObservableCollection<Receipt> ReceiptList = new              ObservableCollection<Receipt>();
             model.ReceiptList = Receipt.GetReceiptList();// model.ReceiptList is your model property
            return View(model);

        }

Add a property in your model class, like

ObservableCollection<Receipt> ReceiptList  {get :set;}

Answer 3

I'm not 100% sure what you're asking but it sounds like you need to enable client side validation on your RequiredIf attribute.