如何在asp.net mvc 5中从knockout.js发布数据到ViewModel

本文关键字：布数据 数据 ViewModel js knockout asp net mvc 中从 | 更新日期: 2023-09-27 18:04:23

下面我已经提到了我的Viewmodel类

public class SignupViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
    public string ShoeSize { get; set; }
    public string DressSize { get; set; } 
}

在我的控制器

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(SignupViewModel model)
    {
        return Json(new {success=true });
    }

在我的knockout.js中，我想使用self.SignupModel = new signupModel();传递数据到我的视图模型。

这可能吗?

如何在asp.net mvc 5中从knockout.js发布数据到ViewModel

请参考此代码。我希望这对你有用。

 ajax.post('Account', form).done(function (response) {
            if (response.id != '') {
                window.location = '/account/show?id=' + response.id;
            }
        });

对于ajax.post()函数，我必须使用ajax.js。

ajax.js

定义函数(){

"use strict";
var exports = {},
    performAjaxCall;
$.ajaxSetup({ cache: false });
var $successMessage = $('#SuccessMessage'),
    $failureMessage = $('#FailureMessage'),
    $busyIndicator = $('#BusyIndicator'),
    $ajaxValidationErrors = $('#ajax-validation-errors');
$.subscribe('successMessage', function (message) {
    if (!message)
        message = 'Operation completed successfully.';
    $successMessage.stop(false, true).text(message).show().delay(3000).fadeOut(3000);
});
$.subscribe('failureMessage', function (message) {
    if (!message)
        message = 'Operation failed. Please try again later.';
    $failureMessage.stop(false, true).text(message).show().delay(3000).fadeOut(3000);
});
$.subscribe('showBusyIndicator', function () {
    $busyIndicator.show();
});
$.subscribe('hideBusyIndicator', function () {
    $busyIndicator.hide();
});
$.subscribe('ajaxValidationErrors', function (errors) {
    if (_.isString(errors)) {
        $ajaxValidationErrors.append($('<div>').append(errors));
    } else { // is object
        $.each(errors.validationObjects, function (i, v) {
            var key = v.key;
            var lines = v.lines;
            var keySpan = $('<span>').text(key.charAt(0).toUpperCase() + key.slice(1));
            var valueSpan = $('<span>').text(lines.join(', '));
            var containerDiv = $('<div>').append(keySpan).append('&nbsp;').append(valueSpan);
            $ajaxValidationErrors.append(containerDiv);
        });
    }
    $ajaxValidationErrors.show();
    setInterval(function () {
        $ajaxValidationErrors.hide();
    }, 5000);
});
$.subscribe('clearAjaxValidationErrors', function () {
    $ajaxValidationErrors.empty();
});
performAjaxCall = function (url, type, data, options) {
    var settings, deferred;
    settings = _.defaults(options || {}, {
        async: true,
        dataType: 'json',
        showSuccessMessage: true,
        successMessage: 'Operation completed successfully.',
        showFailureMessage: true,
        failureMessage: 'Operation failed. Please try again later.',
        showBusyIndicator: true
    });
    deferred = $.Deferred();
    $.ajax({
        url: '/api/' + url,
        type: type,
        dataType: settings.dataType,
        contentType: "application/json; charset=utf-8",
        async: settings.async,
        data: data,
        beforeSend: function () {
            $.publish('clearAjaxValidationErrors');
            if (!!settings.showBusyIndicator && !!settings.async) $.publish('showBusyIndicator');
        },
        complete: function () {
            $.publish('hideBusyIndicator');
        },
        success: function (response) {
            deferred.resolve(response);
            if (settings.showSuccessMessage)
                $.publish('successMessage', [settings.successMessage]);
        },
        error: function (xhr, textStatus, error) {
            deferred.reject(xhr, textStatus, error);
            var responseObj = JSON.parse(xhr.responseText);
            switch (xhr.status) {
                case 303:
                    window.location = responseObj.uri;
                    break;
                case 406:
                case 409:
                    $.publish('ajaxValidationErrors', [responseObj]);
                    break;
                case 500:
                    console.log(responseObj);
                    if (settings.showFailureMessage)
                        $.publish('failureMessage', [settings.failureMessage]);
                    break;
                default:
                    if (settings.showFailureMessage)
                        $.publish('failureMessage', [settings.failureMessage]);
                    break;
            }
        }
    });
    return deferred.promise();
};
_.extend(exports, {
    get: function (url, form, options) {
        options = $.extend({ showSuccessMessage: false }, options || {});
        url += '?' + $.param(form);
        return performAjaxCall(url, 'GET', {}, options);
    },
    post: function (url, form, options) {
        return performAjaxCall(url, 'POST', JSON.stringify(form), options);
    },
    put: function (url, form, options) {
        return performAjaxCall(url, 'PUT', JSON.stringify(form), options);
    },
    del: function (url, id, options) {
        return performAjaxCall(url + "?id=" + id, 'DELETE', null, options);
    },
});
return exports;
});
相关文章：