如何根据我在MVC4中使用jQuery AJAX从服务调用获得的结果显示/隐藏部分视图?

时间:2013-04-20 00:40:33

标签: asp.net-mvc razor asp.net-mvc-4

我想有一个页面,我可以输入贷款号码,然后我会调用WCF获取服务,看看贷款号码是否有效。如果贷款#有效,我想在同一页面上显示贷款相关数据(部分视图)。

这是我的主要观点:

@model LoanStatus.Web.Models.Validate    
@{
    ViewBag.Title = "Validate";
}    
@section Scripts {
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval") 
    @Scripts.Render("~/bundles/jqueryui")
}    

<script type="text/javascript">

    jQuery(function ($) {
        $("#txtssn").mask("9999");
    });

    function validateRequest() {

        var $form = $('form');
        if ($form.valid()) {
            $.support.cors = true;

            var lnkey = $('#txtlnkey').val();                

            $.ajax({
                type: "GET",
                url: "http://localhost:54662/Service1/ValidateRequest/" + encodeURIComponent(lnkey),                    
                contentType: "application/json; charset=utf-8",
                dataType: "json",  //jsonp?
                success: function (response) {
                    $('#Result').html('Loading....');

                    if (response.ValidateRequestResult.toString().toUpperCase() == 'TRUE') {
                        alert('validated');

                    } else {
                        alert('cannot validated' + response.ValidateRequestResult.toString().toUpperCase());
                        //$("#Result").hide();
                    }

                    $('#Result').html(response.ValidateRequestResult);
                    //alert(response.ValidateRequestResult.toString());
                },
                error: function (errormsg) {
                    alert("ERROR! \n" + JSON.stringify(errormsg));                        
                }
            });
            //
        } else {
            $('#Result').html('Input Validation failed');
        }
    }
</script>   

@using (Html.BeginForm()) {

        <fieldset>
            <legend>Log in Form</legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.LoanKey, new{}) 
                    @Html.TextBoxFor(m => m.LoanKey, new { @id = "txtlnkey" })
                    @Html.ValidationMessageFor(m => m.LoanKey)
                </li>                    
            </ol>
            <input type="button" value="Get Status" onclick="javascript:validateRequest();" />
        </fieldset>
    }

<div id="Result">    
    @if (ViewBag.Validated)
    {
        @Html.Action("GetLoanInfo");
    }
</div>

以下是我的控制器:

namespace LoanStatus.Web.Controllers
{
    public class ValidateController : Controller
    {
        //
        // GET: /Validate/
        [HttpGet]
        public ActionResult Index()
        {
            var model = new Validate() {LoanKey = "", Last4Ssn = ""};    
            ViewBag.Validated = false;                
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(Validate model, bool validated)
        {
            // do login stuff
            ViewBag.Loankey = model.LoanKey;
            ViewBag.Validated = true;    
            return View(model);
        }


        public ActionResult GetLoanInfo() // SHOWs Search REsult
        {
           return PartialView("_LoanInfoPartial", ViewBag.Loankey);
        }

    }
}

我希望只有在jQuery AJAX服务调用返回TRUE(我有@Html.Action("GetLoanInfo");的地方时才会呈现'alert('validated')'。我不知道该怎么做。如果我可以,我的问题可以解决在ViewBag.Validated中将值设置为success:function()。但根据我读到的内容,它无法在jQuery中设置。

我尝试了$("#Result").hide();$("#Result").show();,但它没有用。请帮忙。

1 个答案:

答案 0 :(得分:1)

你可以试试这个:

在你的函数validateRequest()ajax成功,在你显示警告的地方('validated');使用此并尝试:

$('#Result').load('@Url.Action("GetLoanInfo", "Validate")');

在您的视图中,将结果div清空

<div id="Result"> </div>

告诉我它是否有帮助。