CODEWITHSUNDEEP
c#asp.net-core-mvc
user3793935
user3793935

Reputation: 489

ASP.NET Core MVC model doesn't recognize value changes

I'm trying to make a simple ASP.NET Core MVC application which updates / inserts / displays data from our database. I have models written like this (similar to the db fields):

public class INVOICE : ModelBase
{
    [Key]
    public decimal ID { get; set; }
    public string CONTRACTID { get; set; }
    public string ORDERID { get; set; }
    public decimal? INVOICEAMOUNT { get; set; }
    public string BARCODE { get; set; }
    ...
}

(with some more functionality like db update / insert)

I have one controller:

public class HomeController : Controller
{
    // GET: HomeController
    INVOICE invoice = CRUD.GetFirstOrDefault(new INVOICE(), @"WHERE ID IN (75693)");
    public ActionResult Index()
    {
        return View(invoice);
    }
 
    [HttpPost]
    public bool Update()
    {
        return invoice.Update();
    }
}

And the Index.cshtml:

<body>
    <div class="form-group">
        <label>Barcode</label>
        <input type="text" class="form-control" id="BARCODE" placeholder="0" value="@Model.BARCODE" readonly>
    </div>
    <div class="form-group">
        <label>Id</label>
        <input type="text" class="form-control" id="ID" placeholder="0" value="@Model.ID" readonly>
    </div>
    <div class="form-group">
        <label>INVOICEAMOUNT</label>
        <input type="text" class="form-control"  name="INVOICEAMOUNT"  id="INVOICEAMOUNT" value="@Model.INVOICEAMOUNT" aria-describedby="emailHelp" placeholder="0">
    </div>

    <form id="formUpdate">
        <div>
            <asp:button id="Button" class="btn btn-primary">Update</asp:button>
        </div>
    </form>

    @section Scripts{
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      

        <script>
                $(function () {
                    $("#Button").click(function () {
                        $.ajax({
                            type: "POST",
                            url: "/Home/Update",

                            success: function (response) {
                                console.log(response);
                            },
                            failure: function (response) {
                                alert("Fail");
                            },
                            error: function (response) {
                                alert("error");
                            }
                        });
                    });
                });
        </script>        
    }
</body>

But now, when I'm clicking the button after I changed the Inputfield value of the INVOICEAMOUNT, the update is called and successful, but the values are the same as they where when I initialized the model. How do I tell my model that the values got changed?

Edit: My wording is bad. The Update is working, but the update isn't using the values that are displayed in the view. It's still using the values I initialized, even though I changed the input field values (clicked in it, wrote a new number).

Upvotes: 1

Views: 2046

Answers (3)

Victor
Victor

Reputation: 8925

It is possible to use Html.BeginForm() to achieve what you trying to implement.

After pressing on the Update button an updated INVOICE model will POSTed to Update(INVOICE invoice) action.

The controller side:

public class HomeController : Controller
{    
    public ActionResult Index(INVOICE model = null)
    {
        if (model == null || model.ID == 0)
        {
            model = CRUD.GetFirstOrDefault(new INVOICE(), @"WHERE ID IN (75693)");
        }
        return View(model);
    }

    [HttpPost]
    public ActionResult Update(INVOICE invoice)
    {
        if (ModelState.IsValid)
        {            
            // TODO: additional logic to save the updated `invoice` record

        }           
        return View("Index", invoice);           
    }
}

The Index view:

@model Models.INVOICE
@{
    ViewBag.Title = "Index";
}

@using (Html.BeginForm("Update", "Home"))
{
    @* @Html.ValidationSummary(); *@

    <div class="form-group">
        @Html.LabelFor(m => m.BARCODE)
        @Html.TextBoxFor(m => m.BARCODE, new { @class = "form-control", placeholder = "0" })
        @Html.ValidationMessageFor(m => m.BARCODE)
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.ID)
        @Html.TextBoxFor(m => m.ID, new { @class = "form-control", placeholder = "0" })
        @Html.ValidationMessageFor(m => m.ID)
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.INVOICEAMOUNT)
        @Html.TextBoxFor(m => m.INVOICEAMOUNT, new { @class = "form-control", placeholder = "0", aria_describedby="emailHelp" })
        @Html.ValidationMessageFor(m => m.INVOICEAMOUNT)
    </div>

    <button type="submit" class="btn btn-primary">Update</button>

    @Html.HiddenFor(m => m.CONTRACTID)
    @Html.HiddenFor(m => m.ORDERID)
}

Upvotes: 1

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

Updated

Your form fields (inputs) should be within your form element.

<form id="formUpdate">
    <div class="form-group">
        <label>Barcode</label>
        <input type="text" class="form-control" id="BARCODE" placeholder="0" value="@Model.BARCODE" readonly>
    </div>
    <div class="form-group">
        <label>Id</label>
        <input type="text" class="form-control" id="ID" placeholder="0" value="@Model.ID" readonly>
    </div>
    <div class="form-group">
        <label>INVOICEAMOUNT</label>
        <input type="text" class="form-control" name="INVOICEAMOUNT" id="INVOICEAMOUNT" value="@Model.INVOICEAMOUNT" aria-describedby="emailHelp" placeholder="0">
    </div>

    <div>
        <asp:button id="Button" class="btn btn-primary" type="submit">Update</asp:button>
    </div>
</form>

And your controller should accept your model as parameter

[HttpPost]
public bool Update(INVOICE model)
{
    invoice.BARCODE = model.BARCODE;
    invoice.ORDERID = model.ORDERID 
    .... .    
    return invoice.Update();
}

And last remove button click event as we changed the button type to submit it will automatically do the form post. No need to have a button click and ajax call.

Upvotes: 0

Dai Bok
Dai Bok

Reputation: 3606

try this

[HttpPost]
public bool Update(INVOICE model)
{
    invoice.BARCODE = model.BARCODE;
    invoice.ORDERID = model.ORDERID 
    .... .    
    return invoice.Update();
}

Upvotes: 0

Related Questions