Using @HTML.Action with Parameters to C# controller

Question

In View, the user will check 1 or more names from what's displayed ...

<form name=chkAttend method=post  onsubmit='return validate(this)'>                 
<div>
     @if (Model.evModel.Participants != null)
    {
       foreach (var fi in Model.evModel.Participants)
       {
           <div> 
                @if (@fi.AttendedFlag != true)
                {
                     <input type="checkbox" id="c_@fi.EnrollmentId" name="MyCheckboxes" value="@fi.EnrollmentId" />
                      <label for="c_@fi.EnrollmentId" aria-multiselectable="True"></label>
    <span></span> @fi.EnrollmentId @fi.ParticipantName                                                                                  
                 }
           </div>
        }
    }
     <input type=submit value="Confirm Attendance">
    </div> 
</form>

After selecting names, call the function to identify which names checked. The checked names only need to be passed to the controller. The problem - I'm getting the error message: Error 49 The name 'id' does not exist in the current context

        function validate(form) {
           var id = ""
           for (var i = 0; i < document.chkAttend.MyCheckboxes.length; i++) 
           {
              if (document.chkAttend.MyCheckboxes[i].checked)
               id += document.chkAttend.MyCheckboxes[i].value + ","
           }
           if (id == "") 
          {
              alert("Place a check mark next to event's Participant")
           }
          else 
          {
            @Html.Action("ConfirmAttendance", "Admin", new { eventid = @Model.evModel.Id, enrollid =id })
        }
            return false;
       }

How do I pass ONLY the checked items as parameter for the function in my controller?

You can't just drop server-side code (`@Html.Action...`) into client-side code like that. It will never work. You need to learn the difference between the Razor that is run on the server before the view is returned and the Javascript that is run in the browser. `id` doesn't exist in the current context because that C# code is run on the server before page load, long before the `id` variable is ever created in the Javascript that runs when the form submits. — Ant P, Oct 08 '14 at 18:17

score 0 · Answer 1 · answered Oct 09 '14 at 11:24

You cannot inject a server-side partial view into your code like that. As it stands (if you got around the id variable reference problem) you would literally inject a partial view inline into your Javascript which will create invalid Javascript!

Instead treat the JS as client-side only and feed information into the page that the Javascript will need in a way that is easy to access. You can inject global variables via injected JS code, but I strongly advise against that practice.

Instead your MVC page could inject the controller action URL and the event id as data- attributes like this:

<form name="chkAttend" method="post" 
      data-action="@Url.Content("~/Admin/ConfirmAttendance")" 
      data-eventid="@Model.evModel.Id">

Using Url.Content will ensure the URL is always site relative, even when hosted as a virtual application.

Your client-side code can then pick up the values from the form, add the selected id and call the server action using Ajax:

e.g.

function validate(form) {
     var action = $(form).data('action');
     var eventId = $(form).data('eventid');

The fun begins now because you need to call the server from the client-side, e.g. via Ajax, with your selected option and do something with the result to change the display.

     $.ajax({ 
          // Use constructed URL (action + event id + id)
          url: action + "?eventid=" + eventId + "&enrollid=" + id,
          type: "PUT"
          success: function (data){
               // Do something with the server result
          }
     });

You do not show your controller's ConfirmAttendance action so I cannot even guess what you are returning. Make sure it is suitable (could be as simple as a Boolean result or as complex as a partial view to insert into the page).

Using @HTML.Action with Parameters to C# controller

1 Answers1