Using MVC. I'm trying to click a button client side to retrieve a database, so that may also appear on the browser

Question

I am creating a sign in - signout app using MVC C# Visual Studio and I need some assistance.

Whenever I try to click the button to get an onclick event, it is suppose to call the GetList method and retrieve all of the data in the database where Signout is equal to null in the Visitor column.

It is not hitting the GetList method. What do I need to do to move forward?

This is my code:

Controller

using NameSpaceName.Models;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Configuration;
using System.Net;
using System.Data.SqlClient;
using ClassLibrary1;
using System.Data;

namespace NameSpaceName.Controllers {
    public class VisitorController : Controller {
        // GET: Visitor
        [HttpGet]
        public ActionResult Index(int id=0) {
            Visitor visitor = new Visitor();
            Entities db = new Entities();
            var employee = db.Employees.ToList();
            return View(visitor);
        }

        [HttpGet]
        public ActionResult GetList(Visitor visitor) {
            List<String> Visitor = new List<String>();
            using (Entities db = new Entities()) {
                if (visitor.SignOut == null) {
                //
                }
            }
            return View(visitor);
        }

        [HttpPost]
        public ActionResult SubmitInfo(FormModel model) {
            return new JsonResult() {
                Data = model,
                MaxJsonLength = int.MaxValue,
            };
        }
    }
}

RouteConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace NameSpaceName.Web {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Submit Info", // Route name
                "visitor/submit-info/", // URL with parameters
                new { controller = "Visitor", action = "SubmitInfo" } 
            );

            routes.MapRoute(
                "Get Info", // Route name
                "visitor/get-info/", // URL with parameters
                new { controller = "Visitor", action = "GetInfo" }
            );

            routes.MapRoute(
                name: "Default",
                url: "{id}",
                defaults: new { controller = "Visitor", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

Partial View _SignInOrSignOut

@using NameSpaceName;
@using ClassLibrary1;

@model Visitor
@{
    ViewBag.Title = "GetInfo";
}
@{
    AjaxOptions options = new AjaxOptions {
        HttpMethod = "GET",
        OnSuccess = "GetList",
        OnFailure = "NoList",
        Url = "/visitor/get-info/"
    };
}
<ul class="col-xs-12">
    <li class="col-xs-6">
        <input type="button" class="btn-cls SignIn" value="Sign In" name="Sign In" />
    </li>
    <li class="col-xs-6">
        <input type="button" value="Sign Out" class="btn-cls SignOut" name="Sign Out" onclick="@Url.Action("GetInfo", "Visitor")" />
    </li>
</ul>

//jQuery code
$(document).ready(function () {
    window.formSuccess = function (resp) {
        setTimeout(function () {
            $(".signInForm").hide();
            $(".signInBtn").show();
        }, 3000);
    };

    window.formFails = function (resp) {
        debugger;
    };
    window.GetList = function (resp) { alert("Yay"); };
    window.NoList = function (resp) { alert("No"); };
}).on('click', '.btn-cls', function() {
    var $this = $(this);
    if ($this.is('.SignIn')) {
        $(".signInBtn").hide();
        $(".signInForm").show();
    } else {
        console.log('SignOut');
    }
});

View

<div class="col-centered signInBtn col-xs-12">
    @Html.Partial("_SignInOrSignOut")
</div>
<div class="col-centered signInForm col-xs-12">
    @using (Ajax.BeginForm(null, null, options, new { @class = "visitor-form" })) {
    <div class="input">
        @Html.TextBoxFor(model => model.FirstName, new {
        @class = "firstName required",
        @id = "firstName",
        @placeHolder = "First Name",
        @name = "FirstName",
        @tabIndex = 1
     })
     </div>
     <div class="input">
         @Html.TextBoxFor(model => model.LastName, new {
         @class = "lastName required",
         @id = "lastName",
         @name = "LastName",
         @placeHolder = "Last Name",
         @tabIndex = 2
     })
     </div>
     <div class="input">
         @Html.TextBoxFor(model => model.Company, new {
         @class = "company",
         @id = "company",
         @name = "Company",
         @placeHolder = "Company",
         @tabIndex = 3
     })
     </div>
     <div class="input">
         @Html.TextBoxFor(model => model.EmailAddress, new {
         @class = "emailAddress",
         @id = "emailAddress",
         @name = "EmailAddress",
         @placeHolder = "Email Address",
         @tabIndex = 4
     })
     </div>
     <div class="input">
         @Html.TextBoxFor(model => model.ReasonForVisit, new {
         @class = "reasonForVisit required",
         @id = "reasonForVisit",
         @name = "ReasonForVisit",
         @placeHolder = "Reason For Visit",
         @tabIndex = 5
     })
     </div>
     <div class="input">
         @Html.DropDownListFor(model => model.EmployeeId, Employee.EmployeeDropDown, new { 
                @class="employeeList required",
            })
     </div>
     @Html.HiddenFor(model => model.SignIn)
     @Html.HiddenFor(model => model.SignOut)
     @Html.HiddenFor(model => model.IsEmailed)

     <input type="submit" value="Submit" />
</div>

Answer 1

John, Your Default Map Route should look something like this - notice "url:" see if it hits GetList now.

 routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

Then look at this explanation on how a your action methods in controller correlate to your views - each controller should have a corresponding view (.cshtml) how does asp.net mvc relate a view to a controller action?

And there is always a corresponding POST method for a GET with the same name if not; if your aim is to to post your result from GetList() to SubmitInfo() you have to decorate the method like this

     [HttpPost, ActionName("GetList")]
    public ActionResult SubmitInfo(FormModel model) {.....}

Hope this helps.