ASP.net – Widok silnie typowany i Ajax

namespace AjaxDemo.Models
{
    public class Person
    {

        public int PersonId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }

// W ten sposób tworzymy listę z której będziemy mogli skorzystać 
// jest to statyczna metoda typu IEnumerable klasy Person , o nazwie GetPersonList, ktora zwraca wypelniony danymi obiekt o nazwie person


        public static IEnumerable<Person> GetPersonList()
        {
            var persons = new List<Person>
            {
                new Person() {FirstName="Jan",LastName="Kowalski" },
                new Person() {FirstName="Krzysztof",LastName="Nowak" },
                new Person() {FirstName="Mariusz",LastName="Brzęczyszczykiewicz" },
                new Person() {FirstName="Janusz",LastName="Marecki" },
                new Person() {FirstName="Katarzyna",LastName="Złotkowska" },
                new Person() {FirstName="Julian",LastName="Lubosiński" },
                new Person() {FirstName="Grzegorz",LastName="Rogowski" },
                new Person() {FirstName="Bartłomiej",LastName="Zasiński" },
                new Person() {FirstName="Karol",LastName="Cichoń" },
                new Person() {FirstName="Jan",LastName="Deweloperski" },
                new Person() {FirstName="Michał",LastName="Kleczkowy" },
                new Person() {FirstName="Karol",LastName="Świtała" },


            };

            return persons;
        }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

namespace AjaxDemo.Models

{

public class Person

{

public int PersonId { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

// W ten sposób tworzymy listę z której będziemy mogli skorzystać

// jest to statyczna metoda typu IEnumerable klasy Person , o nazwie GetPersonList, ktora zwraca wypelniony danymi obiekt o nazwie person

public static IEnumerable<Person> GetPersonList()

{

var persons = new List<Person>

{

new Person() {FirstName="Jan",LastName="Kowalski" },

new Person() {FirstName="Krzysztof",LastName="Nowak" },

new Person() {FirstName="Mariusz",LastName="Brzęczyszczykiewicz" },

new Person() {FirstName="Janusz",LastName="Marecki" },

new Person() {FirstName="Katarzyna",LastName="Złotkowska" },

new Person() {FirstName="Julian",LastName="Lubosiński" },

new Person() {FirstName="Grzegorz",LastName="Rogowski" },

new Person() {FirstName="Bartłomiej",LastName="Zasiński" },

new Person() {FirstName="Karol",LastName="Cichoń" },

new Person() {FirstName="Jan",LastName="Deweloperski" },

new Person() {FirstName="Michał",LastName="Kleczkowy" },

new Person() {FirstName="Karol",LastName="Świtała" },

};

return persons;

}

namespace AjaxDemo.Controllers
{
    public class HomeController : Controller
    {
       // searchQuery - to nazwa zmiennej ktora bedzie przechowywala tekst, ktroy wpiszemy w celu filtrowania
        public ActionResult Index(string searchQuery)
        {
              
            IEnumerable<Person> personList;
           
           
            if (searchQuery != null)
            {
               // zapytanie Linq, ktore bedzie filtrowalo dane ( w naszym przypadku listę osob) na podstawie wprwadzonego searchQuery
                personList = Person.GetPersonList().Where(p => p.FirstName.Contains(searchQuery) || p.LastName.Contains(searchQuery) || searchQuery == p.FirstName + " " + p.LastName).ToArray();
                
             }
            else // Jezeli zapytanie bedzie puste zwrocimy cala tablice naszych danych
                personList = Person.GetPersonList().ToArray();

            if (Request.IsAjaxRequest()) // jezeli zapytanie bedzie typu ajax zwracamy widok czastkowy - w naszym przypadku bedzie tam wyswietlana lista , gdzie musimy rowniez przekazac obiekt
            {
                return PartialView("_PersonList", personList);
            }
           
            return View(personList);
        }

        public ActionResult PersonSuggestion(string term)
        {
            var personList = Person.GetPersonList().Where(p => p.FirstName.Contains(term) || p.LastName.Contains(term));
            return Json(personList, JsonRequestBehavior.AllowGet);
        }
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

namespace AjaxDemo.Controllers

{

public class HomeController : Controller

{

// searchQuery - to nazwa zmiennej ktora bedzie przechowywala tekst, ktroy wpiszemy w celu filtrowania

public ActionResult Index(string searchQuery)

{

IEnumerable<Person> personList;

if (searchQuery != null)

{

// zapytanie Linq, ktore bedzie filtrowalo dane ( w naszym przypadku listę osob) na podstawie wprwadzonego searchQuery

personList = Person.GetPersonList().Where(p => p.FirstName.Contains(searchQuery) || p.LastName.Contains(searchQuery) || searchQuery == p.FirstName + " " + p.LastName).ToArray();

}

else // Jezeli zapytanie bedzie puste zwrocimy cala tablice naszych danych

personList = Person.GetPersonList().ToArray();

if (Request.IsAjaxRequest()) // jezeli zapytanie bedzie typu ajax zwracamy widok czastkowy - w naszym przypadku bedzie tam wyswietlana lista , gdzie musimy rowniez przekazac obiekt

{

return PartialView("_PersonList", personList);

}

return View(personList);

}

public ActionResult PersonSuggestion(string term)

{

var personList = Person.GetPersonList().Where(p => p.FirstName.Contains(term) || p.LastName.Contains(term));

return Json(personList, JsonRequestBehavior.AllowGet);

}

@model IEnumerable<AjaxDemo.Models.Person>
<div>
    <div class="col-lg-3" id="personlist-section">
        <table class="table">

            <tr>
                <th>
                    Imie
                </th>
                <th>
                    Nazwisko
                </th>
                <th></th>
            </tr>


            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.FirstName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LastName)
                    </td>

                </tr>
            }
        </table>



    </div>
    
 
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

@model IEnumerable<AjaxDemo.Models.Person>

<div>

<tr>

<th>

Imie

</th>

<th>

Nazwisko

</th>

</tr>

@foreach (var item in Model)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.FirstName)

</td>

<td>

@Html.DisplayFor(modelItem => item.LastName)

</td>

</tr>

}

</table>

</div>

@model IEnumerable<AjaxDemo.Models.Person>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/themes/south-street/jquery.ui.all.css" rel="stylesheet" />

    <title>Index</title>
</head>
<body>
    <div class="col-lg-3">

    </div>
    <form id="search-form" method="get" data-ajax="true" data-ajax-target="#personlist-section" data-ajax-update="#personlist-section">
        <input id="SearchQuery" name="searchQuery" data-autocomplate-source="@Url.Action("PersonSuggestions")" placeholder="Wprowadz" />
        <input type="submit" value="Filtruj" />
    </form>
    <br />
    @*Odwołanie się do widoku cząstowego*@
    @Html.Partial("_PersonList")

    @*Pamietajmy, o tym, że aby korzystać z poniższy bibliotek należy je doinstalować do projektu,
        w tym celu klikamy prawym klawiszem myszy na nazwe projektu  w Solution Explorer, wybieramy Manage Nuget Packages
    Wyszukujemy i instalujemy następujące biblioteki JQuery JQuery UI  i  JQuery Unobtrusive Ajax
    *@

    <script src="~/scripts/jquery-2.1.4.js"></script>
    <script src="~/scripts/jquery-ui-1.11.4.js"></script>
    <script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

    <script>

        var setupAutoComplite = function () {

            var $input = $("#SearchQuery");

            var options = {
                source: $input.attr("date-autocomplete-source"),
                select: function (event, ui) {
                    var $input = $("#SearchQuery");
                    $input.val(ui.item.label);
                    var $form = $input.parents("from:first");
                    $form.submit();
                }
            };

            $input.autocomplete(options);

        };

        setupAutoComplite();
    </script>




</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

@model IEnumerable<AjaxDemo.Models.Person>

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

</div>

</form>

<br />

@*�anie � do widoku �stowego*@

@Html.Partial("_PersonList")

@*Pamietajmy, o tym, że aby � z poniższy bibliotek należy je � do projektu,

w tym celu klikamy prawym klawiszem myszy na nazwe projektu w Solution Explorer, wybieramy Manage Nuget Packages

Wyszukujemy i instalujemy ��ce biblioteki JQuery JQuery UI i JQuery Unobtrusive Ajax

*@

var setupAutoComplite = function () {

var $input = $("#SearchQuery");

var options = {

source: $input.attr("date-autocomplete-source"),

select: function (event, ui) {

var $input = $("#SearchQuery");

$input.val(ui.item.label);

var $form = $input.parents("from:first");

$form.submit();

}

};

$input.autocomplete(options);

};

setupAutoComplite();

</script>

</body>

</html>

Wiedza Informatyczna

Podziel się wiedzą z innymi!

ASP.net – Widok silnie typowany i Ajax

About the Author: Karol Cichoń

Dodaj komentarz Anuluj pisanie odpowiedzi

You May Also Like

ASP.net – Formularz – na podstawie Modelu

ASP.net – Widok silnie typowany – przykład

About the Author: Karol Cichoń

Dodaj komentarz Anuluj pisanie odpowiedzi