Question

我有一个问题，我想使用C＃MVC AJAX在我的数据库中添加一个新行并且它不起作用。我可以看到文本框的值作为URL中的参数，但是当我点击提交按钮时，它不起作用，我不知道如何继续。你能帮我解决这个问题吗？这是代码：

我在Controller中包含插入指令的方法：

public void AddCategorie(string cat)
{
    Category cate = new Category();
    cate.CategoryNom = cat;
    db.Categories.Add(cate);
    db.SaveChanges();
}

我在View中的代码显示结果：

@{
    ViewBag.Title = "Gestion des catégories";
}

<hgroup class="title">
    <h1>@ViewBag.Title</h1>
</hgroup>

<section class="contact">
    <form ng-model="AddCategorie()">
        <input type="text" name="name" placeholder="Nouvelle catégorie" /><br />
        <input type="submit" value="Ajouter" />
    </form>
    <input type="submit" value="Modifier" />
    <input type="submit" value="Supprimer" />
</section>

索引中的代码（可能有帮助）它显示了应用程序的主页面：

@{
    ViewBag.Title = "Home Page";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<script src="http://bootswatch.com/spacelab/bootstrap.min.css"></script>

@*<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>*@

<style>
    .categories, .animes, .perso {
        color: #000;
        margin-left: 35px;
    }
</style>


<script>
    templateCategories = null;
    templateAnimes = null;
    templatePerso = null;

    $(function () {
        templateCategories = Handlebars.compile($('#CategoriesTemplate').html());
        templateAnimes = Handlebars.compile($('#AnimesTemplate').html());
        templatePerso = Handlebars.compile($('#PersoTemplate').html());

        $.getJSON("Animes/GetCategories", null, function (data) {
            var result = templateCategories(data);

            $('#CategoriesOutput').html(result);
        });
    });

    function GetAnimes(catID) {
        $.getJSON("Animes/GetAnimes", { categoryID: catID }, function (data) {
            var resAnimes = templateAnimes(data);

            $('#AnimesOutput').html(resAnimes);
            $('lstCat').html(resAnimes);
        });
    }

    function GetPersonnages(aniID) {
        $.getJSON("Animes/GetPersonnages", { animeID: aniID }, function (data) {
            var resPerso = templatePerso(data);

            $('#PersoOutput').html(resPerso);
            $('#lstAni').html(resPerso);
        });
    }

    function AddCategorie(categorie) {
        $.getJSON("Animes/AddCategorie", { cat: categorie }, function (data) {
    });
}

</script>

<h2>Slideshow</h2>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img src="../imgs/elfen1.jpg" /></div>
    </div>
</div>


<h3>Catégories</h3>

<div id="CategoriesOutput">

</div>

<h3>Animes</h3>

<div id="AnimesOutput">

</div>

<h3>Personnages</h3>

<div id="PersoOutput">

</div>

<script id="CategoriesTemplate" type="text/x-handlebars-template">
    {{#each}}
    <h3 class="categories" onclick="GetAnimes({{CategoryID}})">{{CategoryNom}}</h3>
    {{/each}}
</script>

<script id="AnimesTemplate" type="text/x-handlebars-template">
    {{#each}}
    <h3 class="animes" onclick="GetPersonnages({{AnimeID}})">{{AnimeNom}}</h3>
    {{/each}}
</script>

<script id="PersoTemplate" type="text/x-handlebars-template">
    {{#each}}
    <h3 class="perso">{{PersonnageNom}}</h3>
    {{/each}}
</script>

Answer 1

首先，您不需要在表单上使用此属性：

<form ng-model="AddCategorie()">

ng-model只有在您使用Angular时才会发挥作用，而您似乎并不是这样。此外，AddCategorie目前没有明确的返回值，这意味着其结果为undefined。所以，即使你使用Angular，这也不是你想要的。

至于你的问题，我相信它的根源是你遇到this problem with the browser's form submission taking precedence over your JavaScript。

由于您的表单未指定任何操作或方法，因此单击“提交”按钮将使用其默认操作和方法提交表单。这是回到当前URL的GET。这就是为什么您在提交后会在网址中看到网址更改为Animes/Index?name=category，但您的AddCategorie操作未被调用。

为了使这个工作，我会修改这样的形式：

<form id="add-categorie">
    <input type="text" id="nouvelle-categorie-nom" placeholder="Nouvelle catégorie" /><br />
    <input type="submit" value="Ajouter" />
</form>

然后，附加一个事件处理程序来监视表单的提交事件：

$('#add-categorie').on('submit', function(evt) {
  // This is the key line to prevent the default browser behavior of
  //  sending a GET back to the current URL.
  evt.preventDefault();

  var data = {
    // Did I get my Francias correct?
    cat: $('#nouvelle-categorie-nom').val();
  };

  // This should be a POST, not a GET (ala $.getJSON).
  $.post('/Animes/AddCategorie', data);
});

我还建议甚至不允许GET，因为它不是幂等操作：

[HttpPost]
public void AddCategorie(string cat) {
    db.Categories.Add(new Category { CategoryNom = cat });
    db.SaveChanges();
}

有很多实际和理论上的理由说明为什么你不应该在这里使用GET而不是POST，但最容易引起麻烦的是GET请求的浏览器缓存。

Answer 2

根据提供的代码看起来不像您要发布的内容。您应该能够在AddCategories中设置调试标记，并查看它是否到达该方法。类似的东西：

$.postJSON("Animes/AddCategorie",{ cat: 1 }, function (data) {

});

http://www.make-awesome.com/2012/11/jquery-postjson-method-for-asp-net-mvc/
http://hello-angularjs.appspot.com/angularjs-http-service-ajax-post-json-data-code-example
Angularjs $http.post, asp.net mvc controller gets null

BTW，如果你期望AddCategorie返回一个值，我希望它是一个json值，而不是void。否则，将显示警告（“错误”），而不是“helloWorld”。但是，如果丹尼尔对此有任何评论，我很乐意听到。

错误:(错误）

public void AddCategorie(string cat)
        {
            Category category = new Category();
            category.CategoryNom = cat;

            //return Json(category, JsonRequestBehavior.AllowGet);
        }

jQuery.getJSON("Search/AddCategorie", { cat: '2' }, function (data) {
    alert("helloWorld");
}).error(function (data) {
    alert("error");
});

不错误:( HelloWorld）

public JsonResult AddCategorie(string cat)
        {
            Category category = new Category();
            category.CategoryNom = cat;

            return Json(category, JsonRequestBehavior.AllowGet);
        }

jQuery.getJSON("Search/AddCategorie", { cat: '2' }, function (data) {
    alert("helloWorld");
}).error(function (data) {
    alert("error");
});

如果你想在没有错误的情况下发布空白：

jQuery.post("Search/AddCategorie", { cat: '2' }, function (data) {
    alert("helloworld");
}).error(function (data) {
    alert("error");
});

如何使用AJAX和MVC C＃将行插入数据库？

2 个答案: