将值从MVC视图传递到控制器

Question

I have a controller in my MVC application which inserts data into a database. This looks like the following:

 public ActionResult Add(string orgCode)
    {
       ClientClass client = new ClientClass();
        if (ModelState.IsValid)
        {
            int _records = client.Insert(orgCode, "");
          //  int _records = insertmodel.Insert(insertmodel.Org_Name, insertmodel.Org_Code);
            if (_records > 0)
            {
                return RedirectToAction("Index", "Home");
            }
            else
            {
                ModelState.AddModelError("", "Can Not Insert");
            }
        }
        return View(client);
    }

I also have some input fields in my view layer which store the ng-model for my data that I'm inputting which looks like this:

<div id="step-2" ng-controller="HomeController">
                    <div class="form-group">
                        <div class="form-group" style="padding-left:33%">
                            <div class="row">
                                <br />
                                <div class="col-lg-2">
                                    <h2 style="color:#FF5D00">STEP 2:</h2>
                                </div>
                                <div class="col-lg-5">
                                    <h2 style="color:#00386B"> Contact Details</h2>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2" style="padding-top:8px">
                                    <label for="contactperson" class="labelQuestion">Contact Name</label>
                                </div>
                                <div class="col-lg-7">
                                    <input type="text" class="form-control" name="contactperson" ng-model="userDetails.contactperson" id="txtContactPerson" placeholder="e.g John Smith">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2" style="padding-top:8px">
                                    <label for="contactemail" class="labelQuestion">Contact Email</label>
                                </div>
                                <div class="col-lg-7">
                                    <input type="text" class="form-control" name="contactemail" ng-model="userDetails.contactemail" id="txtContactEmail" placeholder="e.g john.smith@go2tigers.com">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-2" style="padding-top:8px">
                                    <label for="contactnumber" class="labelQuestion">Contact Number</label>
                                </div>
                                <div class="col-lg-7">
                                    <input type="text" class="form-control" name="contactnumber" id="txtContactNumber" ng-model="userDetails.contactnumber" placeholder="e.g +27 76 256 0098">
                                    <div class="help-block with-errors"></div>
                                </div>
                                <button type="submit">submit stuff</button>
                            </div>
                        </div>
                    </div>
                    <pre>{{userDetails |json }} </pre>
                    {{message}}
                </div>

In my javascript, I am testing to see if the Angularjs binding is working:

$scope.userDetails = { organisationname: '', organisationcode: '', branchcode: '', department: '', daterange: '', contactperson: '', contactemail: '', contactnumber: '' }

What I am trying to do is pass those values that I am collecting to the method which adds to the database. After 4 hours of struggling I am lost. I don't know where to call the method from (javascript or from the view) and how to pass those parameters through. Any assistance would be appreciated.

Answer 1

You should break down your work in two parts:

1 - Creating a web service in order to return data (eg a JSON).

See example here: https://spring.io/guides/gs/rest-service/

2 - Call that service using HTTP on your Javascript code (inside Angular), and binding the received JSON to your scope.

See example: https://api.jquery.com/jquery.get/

Any doubts, leave a comment.