首页 > 解决方案 > axios发布后如何使用模型重定向到另一个mvc视图

问题描述

我有一个带有文本框和按钮搜索的登录页面,我创建了一个 vue 实例以在搜索期间管理按钮和消息状态。

当我单击按钮并将数据填充到模型时,我想重定向到另一个名为“详细信息”的视图以显示数据

我该如何解决这个问题?

在我的测试之下

我的剧本

new Vue({
    el: '#vm',
        data: {
            requestCode: '12345',
            isLoading: false,
            buttonText: 'Search',
            message: ''
        },
        methods: {
            onClick: function () {
                let model = this;
                model.buttonText = 'Please wait...';
                model.isLoading = true;
                model.message = '';

                axios({
                    method: 'POST',
                    url: '/home/GetDataFromCode',
                    data: {
                        "requestCode": model.requestCode
                    }
                })
                .then(function (response) {
                    model.message = response.data.message;                          

                    if (response.data.success) {

                        // Here I have my model filled correctly
                        // How I can redirect to another view with model???
                        // My model is (response.data.customer)
                    }
                })
                .catch(function (error) {
                    model.message = error.message;
                });
                .finally(function () {
                    model.buttonText = 'Search';
                    model.isLoading = false;
                });
        }
    }
})

我的cshtml页面

<div id="vm">
    <div class="uk-margin-small">
        <div class="uk-inline uk-width-1-1 uk-text-center">                    
            <input type="text" v-model="requestCode" class="uk-input uk-text-center" />
        </div>
    </div>
    <div class="uk-margin-bottom">
        <button id="btnSearch" v-on:click="onClick" type="button" class="uk-button uk-button-primary uk-width-1-1">
            <span>{{ buttonText }}</span>
            <div v-show="isLoading" uk-spinner="ratio: 0.5"></div>
        </button>
    </div>
    <div class="uk-margin-small">
        <div class="uk-inline uk-width-1-1 uk-text-center">
            <h5 style="height: 30px; text-transform: none">{{ message }}</h5>
        </div>
    </div>
</div>

我的控制器

[HttpPost]
public dynamic GetDataFromCode(string requestCode)
{            
    Customer customer = new Customer()
    {
        RequestCode = requestCode,
        Name = "Harrison",
        Surname = "Ford"
    }

    return Json(new { success = true, customer = customer }, JsonRequestBehavior.AllowGet); 

}

提前致谢

R1g3L

标签: c#vue.jsasp.net-mvc-5modelaxios

解决方案


推荐阅读