从视图发送参数到控制器，无需表单/输入

Question

I reached a point in my code where I need to call a method in the controller from the view.

I need to send some parameters with him from DropDownLists and TextBoxes.

I dont want to make a @using (Html.BeginForm... and an <input> , I just want to keep a <button> with a function call there that gathers that info and runs the method.

Is it possible?

An example of my DDL and Textbox:

@Html.DropDownListFor(cModel => cModel.QueueMonitorConfigTypeName, Enum.GetValues(typeof(BPM.Website.Models.PathType)).Cast<BPM.Website.Models.PathType>().Select(v => new SelectListItem
                            {
                                Text = v.ToString(),
                                Value = v.ToString()
                            }), new { id = "ddlConfigTypeName" })



@Html.TextBoxFor(cModel => cModel.Location, new { id = "txtbLocation" })

My button:

<button id="btnAddUpdateConfig" name="btnAddUpdateConfig" value="Apply" onclick="ValidateValues()">Apply</button>

JS:

function ValidateValues()
{
        $.ajax({
            type: "POST",
            url: "Storage/AddUpdateConfigs",
            data: ({id: @Model.QueueMonitorConfigurationsID, PathType: $('#ddlConfigTypeName').val(), Threshold:$('#ddlThreshold').val(), ValueType:$('#ddlValueTypeName').val(), Location: $('#txtbLocation').val(), Limit: $('#txtbLimit').val(), config: $('#NewOrUpdate').val() }),
            dataType: JSON
        });
}

But my function AddUpdate Configs is not being triggered:

    public ActionResult AddUpdateConfigs(int id, string configType, string location, string threshold, string valueType, int limit)
    {




        return PartialView();
    }

I put a breakpoint in the return and is not reached

Answer 1

Something like this should work:

$.postify = function(value) {
    var result = {};

    var buildResult = function(object, prefix) {
        for (var key in object) {

            var postKey = isFinite(key)
                ? (prefix != "" ? prefix : "") + "[" + key + "]"
                : (prefix != "" ? prefix + "." : "") + key;

            switch (typeof (object[key])) {
                case "number": case "string": case "boolean":
                    result[postKey] = object[key];
                    break;

                case "object":
                    if (object[key].toUTCString)
                        result[postKey] = object[key].toUTCString().replace("UTC", "GMT");
                    else {
                        buildResult(object[key], postKey != "" ? postKey : key);
                    }
            }
        }
    };

    buildResult(value, "");

    return result;
};

function login() {
    var logonmodel = {
        UserName: $tbUsername.val(),
        Password: $tbPassword.val()
    };
    $.ajax({
        type: "POST",
        url: "/account/logon",
        data: $.postify(logonmodel),
        asynch: true,
        dataType: "json",
        success: function (msg) {
            console.log(msg.state);
            if (msg.state == 'good') {
                window.location.href = msg.url;
            }
            else {
                var $generalLoginError = $('span#generalLoginError');
                var $loginuserNameError = $('span#loginUserNameError');
                var $loginPasswordError = $('span#loginPasswordError');

                $loginuserNameError.html(msg.errors.username);
                $loginPasswordError.html(msg.errors.password);
                if (msg.errors.incorrect != '')
                    $generalLoginError.html(msg.errors.incorrect);
            }
        }
    });
}

Here's the controller action:

[HttpPost]
public ActionResult LogOn(LogOnModel model, string returnUrl)
{
    if (ModelState.IsValid)
    {
        if (Membership.ValidateUser(model.UserName, model.Password))
        {
            FormsAuthentication.SetAuthCookie(model.UserName, false);
            if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
                && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
            {
                return Json(new { url = returnUrl, message = "", state = "good" });
            }
            else
            {
                return Json(new { url = "/", message = "", state = "good" });
            }
        }
    }

    // If we got this far, something failed, redisplay form
    return Json(new
    {
        url = "/",
        errors = new
        {
            username = (model.UserName == null) ? "required" : "",
            password = (model.Password == null) ? "required" : "",
            incorrect = (!Membership.ValidateUser(model.UserName, model.Password)) ? "The user name or password provided is incorrect." : "",
            //generic = "An error has occurred. If the error persists, please contact the webmaster."
        },
        state = "error"
    });
}

Answer 2

Do an AJAX request when the button is clicked.

$.ajax({
  type: "POST",
  url: http://site.com/Controller/Action,
  data: data,
  success: success,
  dataType: dataType
});

See: http://api.jquery.com/jQuery.post/