如何使用 Ajax Jquery 并返回 View？答案

【问题标题】：How can i use Ajax Jquery and return View?如何使用 Ajax Jquery 并返回 View？
【发布时间】：2021-02-25 22:33:25
【问题描述】：

我有一个 Ajax Jquery 函数，它将值（位置和参数）发送到 IActionresult，IActionresult 在数据库中进行搜索并返回一个带有模型正确 Objectdata 的新视图。

断点向我显示它进入了 Actionresult 并正确传递了参数并运行返回视图，但它不返回视图。它什么都不做。

Jquery Ajax 是否需要其他数据类型？

在浏览器控制台中，我可以看到 Post 方法已完成。

感谢您的帮助。

Index.cshtml

var LatPosition;
var LongPosition;

const successCallback = (position) => {
    console.log(position);
    LongPosition = position.coords.longitude;
    LatPosition = position.coords.latitude;
    console.log(LatPosition);
}

const errorCallback = (error) => {
    console.error(error);
}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function sendAjaxRequest(element, urlToSend) {
    var clickedButton = element;
    $.ajax({
        type: "POST",
        url: urlToSend,
        dataType: "json",
        data: { 
            LongPosition: LongPosition, 
            LatPosition: LatPosition, 
            id: clickedButton.val(), 
            takeValue: $("#TabakName").val()
        },
        success: function (data) {
            alert(data);
        },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });

    }

    $(document).ready(function () {
        $('#button_1').click(function (e) {
            e.preventDefault();
            sendAjaxRequest($(this), '@Url.Action("Tabakvalidierung","Home")');
        });
    });
 
$(document).ready(function () {
    $("#TabakName").autocomplete({
     source: '@Url.Action("Search", "Tabaksuche")',

    });
});

HomeController.cs

[HttpPost]
public IActionResult Tabakvalidierung(
    string takeValue, 
    string LongPosition, 
    string LatPosition) 
{
    return  View("Shopliste", shopDatens); //returning View with right object
}

【问题讨论】：

您应该从服务器获得的数据类型是 html，而不是 json。查看dataType 和contentType 的含义。使用 MVC，可以从控制器返回部分视图并使用 jQuery 显示生成的 Html。但这仅在您想替换部分页面时才有意义。如果您想返回 View（整个 Html 页面），问题是您为什么首先使用 Ajax？您可以使用 jQuery 发布到页面。
感谢您的回答。是的，我弄清楚了 dataType 和 contentType 的含义。改变它然后它给了我视图的html。我想使用这种方式，因为我有将变量保存在 javascript 中的位置 api。我将尝试只使用 Jquery。现在我尝试使用隐藏表单并将js var保存到隐藏表单并传递它。

标签： jquery asp.net ajax asp.net-mvc model-view-controller

【解决方案1】：

把你的 ajax 改成这样：

$.ajax(
            {
               
                  url: urlToSend,
                 data: { 
            LongPosition: LongPosition, 
            LatPosition: LatPosition, 
            id: clickedButton.val(), 
            takeValue: $("#TabakName").val()
        },
                
                type: "POST",
              
                success: function (result) {
                    $(div).html(result);

// div is  Id of <div>  where you have to show you partial view
                
                },
                error: function (xhr, exception) {
                    ........
                }
            });

并将您的控制器更改为：

[HttpPost]
public IActionResult Tabakvalidierung(
    string takeValue, 
    string LongPosition, 
    string LatPosition) 
{
    return  PartialView("Shopliste", shopDatens); 

// return partial View, if you use View it will be returned with the whole Layout
}  
```

【讨论】：

非常感谢谢尔盖。我已经用隐藏表单做了一个解决方法。但我稍后会尝试你的解决方案:)