C# ActionLink MVC4 - Pass multiple parameters to ActionResult

Question

--Very new to C# and MVC--

In my Views/Tasks/Index.aspx, I have the following row / cells wrapped in a table

<tr>
    <td><%:
            Html.ActionLink(
                HttpUtility.HtmlDecode("&#65291;"),
                "Insert",
                "Tasks",
                new { onclick = "InsertTask();" },
                new { @class = "ActionButton AddButton" }
           )
        %></td>
    <td><input type="text" id="txtAddName" style="width: 200px;" /></td>
    <td><input type="text" id="txtAddDescription" style="width: 400px;"/></td>
    <td><input type="text" id="txtAddStarting" style="width: 200px;" /></td>
    <td><input type="text" id="txtAddEnding" style="width: 200px;" /></td>
</tr>

And also in that same file, I have

<% if (ViewBag.Message != null) { %>
<%: ViewBag.Message %>
<% } %>

<script type="text/javascript">
    function InsertTask() {
        var name =      $('#txtAddName').val();
        var desc =      $('#txtAddDescription').val();
        var starting =  $('#txtAddStarting').val();
        var ending =    $('#txtAddEnding').val();

        $.ajax({
            url: "Insert/" + name + "," + desc + "," + starting + "," + ending,
            context: document.body
        }).done(function () {
            alert("done!");
        });
    }
</script>

In my Controllers/TasksController.cs, I have the following ActionResult(s)

   public ActionResult Index()
    {
        //Create an array of tasks

        //Place task objects into variable tasks

        //Create the view model
        TaskIndexViewModel tivm = new TaskIndexViewModel
        {
            NumberOfTasks = tasks.Count(),
            Tasks = tasks
        };

        //Pass the view model to the view method
        return View(tivm);
    }


  public ActionResult Insert(string Name, string Description, String Starting, String Ending)
  {
      //Insert records to DB

      //Notify
      ViewBag.Message = "Insert Successful";

      //Return success
      return RedirectToAction("Index");
  }

When I click on the ActionLink element, it

1. Does not call the JS function
2. Does call the Insert ActionResult (somehow without even passing parms?)
3. The page refresh (which I eventually want to get rid of) doesn't show anything for ViewBag.Message

My end goal... is to have the ActionLink call the ActionResult through AJAX / JQuery, and display a "Successful" response message... without doing a full page reload.

---

EDIT

---

From SLaks response, I've changed my ActionLink to the below code... And added a "return false;" to the end of my JS function.

            <td><%:
                    Html.ActionLink(
                        HttpUtility.HtmlDecode("&#65291;"),
                        "Insert",
                        "Tasks",
                        null,
                        new { onclick = "InsertTask();"  , @class = "ActionButton AddButton" }
                    )
                %></td>

It now calls the .CS controller ActionResponse method... but all of the parameters received are null.

Answer 1

You need to return false from the inline handler to prevent the browser from performing the default action (navigating to the link)

Answer 2

If you change your ajax call to this it should work:

$.ajax({
        url: "Tasks/Insert",
        data: { name: name, description: desc, starting: starting, ending: ending },
        context: document.body
    }).done(function () {
        alert("done!");
    });