javascriptasp.netasp.net-mvc-5modelbinder

how to use model binder to post data from a form + value of a span to data base


Good time. I'm new in Asp.net-MVC .

I have a form which it gets data from user and there is a span in this page which I want to post data of inputs and value of span to my data base.

I wanted to use model binder but I don't know how to name spans same as my model.

here is my action :

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,TourId,FirstName,LastName,Email,Phone,Comment,FrequentTraveler,TravelersCount,Date,ContactTimePreference,Country,Archived")] Request request)
    {
        if (ModelState.IsValid)
        {
            db.Requests.Add(request);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(request);
    } 

span is getting value from JavaScript

<span class="col-md-5" id="selecteddate"></span>

and here is my form but I write just one of the inputs here for Shorthand. :

 <form role="form" method="post" action="/Tour">
  @Html.AntiForgeryToken()

 <div class="form-group">
 <label for="FName">First Name:</label>
 <input type="text" name="FirstName" class="form-control" id="FName" placeholder="Enter FirstName" />


 </div>

</form>

I want to post value of span id="selecteddate" to data base in column named Date

appreciate if any one could tell me how it could be possible or if you have any better way as suggestion?


Solution

  • One solution for this is, add a hidden html input to your <from>. When you do your submit, you write its value as a copy from your span using javascript.

    <form role="form" method="post" action="/Tour" onsubmit="prepare()">
      @Html.AntiForgeryToken()
    
     <div class="form-group">
     <label for="FName">First Name:</label>
     <input type="text" name="FirstName" class="form-control" id="FName" placeholder="Enter FirstName" />
    
    
     </div>
    <input type="hidden" name="Date" />
    </form>
    
    @section Scripts {
      <script type="text/javascript">
        function prepare() {
            document.getElementsByName("Date")[0].value = document.getElementById("selecteddate").innerHtml;
        }
      </script>
    }