使用Jquery / Ajax和WebApi Get方法加载选项卡

Question

I'm learning jquery/ajax and doing some testing. 我正在学习jquery / ajax并进行一些测试。 I am trying to serve html from asp.net WebApi application and load it into JqueryUI tabs when a user select the desired tab. 我试图从asp.net WebApi应用程序提供html，并在用户选择所需的标签时将其加载到JqueryUI标签中。

I am not able to get my html content loaded. 我无法加载我的HTML内容。

I am following the tutorial on this link 我正在关注此链接上的教程

This is the html I'm using: 这是我正在使用的html：

<!DOCTYPE html>
<html>

<head>
<title> Este es el pedazo de titulo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/ui.tabs.closable.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<script>
$(document).ready(function(){

    $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
     });
   });  
 });

</script>
</head>

<body>

<div id="tabs">
  <ul>   
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="http://localhost/RestFulApi/api/Tabs?name=carlos">Tab 2</a></li>    
  </ul> 
   <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>  

</body>

</html>

As you can see I have modified the href on Tab2 to load from my WebApi service 如您所见，我修改了Tab2上的href以从WebApi服务加载

Inside the webApi service, I am using the following function, which is returning the html without any problem: 在webApi服务内部，我正在使用以下函数，该函数可以毫无问题地返回html：

public class TabsController : ApiController
    {
        //
        // GET: /Tabs/

        public HttpResponseMessage Get(string name)
        {

            string div= "<div style=\"color:white;background-color:red;width:350px;height:300px\"> Hello " +
                  name+ "<br>This html have being server from webApi!</div>";
            return new HttpResponseMessage
            {
                Content = new StringContent(div, Encoding.UTF8, "text/html")
            };
        }

    }

The problem is whenever I click tab2 I get the predefined error message: 问题是，每当我单击tab2时，都会收到预定义的错误消息：

Couldn't load this tab We'll try to fix this as soon as possible.

Any idea why my tab is not being filled with my Html Response? 知道为什么我的标签没有被HTML响应填充吗？

EDIT: 编辑：

Ok, I have added console.log(arguments) after the 好的，我在之后添加了console.log(arguments)

 ui.jqXHR.error(function() {}

and I am getting the following error: 我收到以下错误：

XMLHttpRequest cannot load http://mydomain/RestFulApi/api/Tabs?name=carlos . XMLHttpRequest无法加载http://mydomain/RestFulApi/api/Tabs?name=carlos 。 Origin null is not allowed by Access-Control-Allow-Origin. Access-Control-Allow-Origin不允许使用Origin null。

Answer 1

After doing some research about the Access-Control-Allow-Origin problem, I fixed it by executing my application on IIS server and changing the href path 在对Access-Control-Allow-Origin问题进行了一些研究之后，我通过在IIS服务器上执行应用程序并更改href路径来解决了该问题。

to the following: 到以下内容：

 <li><a href="/RestfulApi/api/Tabs?name=carlos">Tab 2</a></li>

使用Jquery / Ajax和WebApi Get方法加载选项卡

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-05-29 09:30:33

使用Jquery / Ajax和WebApi Get方法加载选项卡

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-05-29 09:30:33

解决方案1
0 已采纳 2013-05-29 09:30:33