Home MVC 5 Razors and jquery with twitter-typeahead
Reply: 0

MVC 5 Razors and jquery with twitter-typeahead

yanker
1#
yanker Published in 2017-12-07 16:48:17Z

I'm having issues making my typeahead plugin work in correctly with MVC razors view. It functions fine but for some reasons, it looks like it is not submitting the Id to the db or what is being submitted conflicts with what is already in db even-though I have confirmed that its submitted a name that is already in db.

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Rental</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">
        @Html.LabelFor(model => model.CustomerId, "Customer", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Customer.Name, null, "Customer", new { htmlAttributes = new { @class = "form-control" } })
            @*Html.DropDownList("CustomerId", null, "Select Customer", htmlAttributes: new { @class = "form-control" })*@
            @Html.ValidationMessageFor(model => model.CustomerId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.MovieId, "Movie", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("MovieId", null, "Select Movie", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.MovieId, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.RentalDate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RentalDate, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.RentalDate, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ReturnDate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ReturnDate, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ReturnDate, "", new { @class = "text-danger" })
        </div>
    </div>

    <div id ="newRental" class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")

Above is my razors html form

 @section scripts {
@Scripts.Render("~/bundles/jqueryval")

<script>
    $(document).ready(function () {
        var vm = {};
        var customers = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: '/api/Customers',
            remote: {
                url: '/api/Customers?query=%QUERY',
                wildcard: '%QUERY'
            }
        });

        $('#Customer').typeahead({
            minLength: 3,
            highlight: true
        }, {
                name: 'Customer',
                display: 'Name',
                source: customers
            }).on("typeahead:select", function (e, Customer) {
               vm.CustomerId = Customer.Id
            });

        $('#newRental').submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: "/api/Rentals/",
                method: "POST",
                data: vm
            })
                .done(function () {
                    toastr.success("Rental Sucessfully Recorded");
                })
                .fail(function () {

                    toastr.error("Renatal Not Recorded")
                });
        })



    });

</script>

}

Above is my typeahead Implementation

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.296638 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO